Add EuiBasicTable.

src-docs/src/components/guide_section/guide_section.js

@@ -230,7 +230,7 @@ export class GuideSection extends Component {
 
     const title = _euiObjectType === 'type' ?
       <EuiCode id={componentName}>{componentName}</EuiCode> :
-      <EuiText color="accent">{componentName}</EuiText>;
+      <EuiText>{componentName}</EuiText>;
 
     let descriptionElement;
 

src-docs/src/routes.js

@@ -40,6 +40,9 @@ import { AvatarExample }
 import { BadgeExample }
   from './views/badge/badge_example';
 
+import { BasicTableExample }
+  from './views/basic_table/basic_table_example';
+
 import { BottomBarExample }
   from './views/bottom_bar/bottom_bar_example';
 
@@ -250,6 +253,7 @@ const components = [
 ].map(example => createExample(example));
 
 const patterns = [
+  BasicTableExample,
 ].map(example => createExample(example));
 
 const sandboxes = [{

src-docs/src/views/basic_table/basic_table_example.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiBasicTable,
+} from '../../../../src/components';
+
+import FullFeatured from './full_featured';
+const fullFeaturedSource = require('!!raw-loader!./full_featured');
+const fullFeaturedHtml = renderToHtml(FullFeatured);
+
+import RenderingColumns from './rendering_columns';
+const renderingColumnsSource = require('!!raw-loader!./rendering_columns');
+const renderingColumnsHtml = renderToHtml(RenderingColumns);
+
+export const BasicTableExample = {
+  title: 'BasicTable',
+  sections: [
+    {
+      title: 'Sorting, pagination, and row-selection',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: fullFeaturedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: fullFeaturedHtml,
+        }
+      ],
+      props: { EuiBasicTable },
+      demo: <FullFeatured />
+    }, {
+      title: 'Rendering columns',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: renderingColumnsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: renderingColumnsHtml,
+        }
+      ],
+      text: (
+        <div>
+          <p>
+           You can specify a <EuiCode>dataType</EuiCode> property on your column definitions
+           to choose a default format with which to render a column&rsquo;s cells.
+          </p>
+
+          <p>
+            If you want to customize how columns are rendered, you can specify a
+            <EuiCode>render</EuiCode> property on the column definitions to
+            customize the content of a column&rsquo;s cells.
+          </p>
+        </div>
+      ),
+      props: { EuiBasicTable },
+      demo: <RenderingColumns />
+    },
+  ]
+};