Improvements to EuiTableOfRecords documentation (#1)

* Add ability to toggle on and off different features of the table. * Rename ValueRenderers to EuiValueRenderers. * Add 'Column render types' example. * Hide footer when missing necessary config. Rename key prop to id. * Refer to dataType instead of renderType. * Rename column.id -> column.field.
cjcenizal · Jan 27, 2018 · 6ad9323 · 6ad9323
1 parent 094e06e
commit 6ad9323
Show file tree

Hide file tree

Showing 11 changed files with 266 additions and 92 deletions.
diff --git a/src-docs/src/views/table_of_records/column_data_types.js b/src-docs/src/views/table_of_records/column_data_types.js
@@ -0,0 +1,75 @@
+import React, {
+  Component,
+} from 'react';
+import { times } from 'lodash';
+
+import {
+  EuiTableOfRecords,
+} from '../../../../src/components';
+
+const selectRandom = (...array) => {
+  const i = Math.floor(Math.random() * array.length);
+  return array[i];
+};
+
+const records = times(5, (index) => {
+  return {
+    id: index,
+    string: selectRandom('Martijn', 'Elissa', 'Clinton', 'Igor', 'Karl', 'Drew', 'Honza', 'Rashid', 'Jordan'),
+    number: Math.floor(Math.random() * 20000),
+    boolean: selectRandom(true, false),
+    date: new Date(
+      1990 + Math.floor(Math.random() * (1990 - 1971)), // year
+      Math.floor(Math.random() * 12), // month
+      Math.floor(Math.random() * 28), // day
+      0, 0, 0, 0
+    ),
+  };
+});
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.data = {
+      records,
+      totalRecordCount: records.length,
+    };
+  }
+
+  render() {
+    const config = {
+      recordId: 'id',
+      columns: [
+        {
+          field: 'string',
+          name: 'string',
+          dataType: 'string',
+        },
+        {
+          field: 'number',
+          name: 'number',
+          dataType: 'number'
+        },
+        {
+          field: 'boolean',
+          name: 'boolean',
+          dataType: 'boolean'
+        },
+        {
+          field: 'date',
+          name: 'date',
+          dataType: 'date'
+        },
+      ],
+    };
+
+    const model = {
+      data: this.data,
+    };
+
+    return (
+      <EuiTableOfRecords config={config} model={model} />
+    );
+  }
+}
diff --git a/src-docs/src/views/table_of_records/implicit_record_action.js b/src-docs/src/views/table_of_records/implicit_record_action.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import { times } from 'lodash';
 
-import { EuiTableOfRecords } from '../../../../src/components';
-import { ValueRenderers } from '../../../../src/components/value_renderer';
-import { EuiSwitch } from '../../../../src/components/form/switch';
-import { EuiIcon } from '../../../../src/components/icon';
-import { Comparators } from '../../../../src/services/sort';
+import {
+  EuiTableOfRecords,
+  EuiValueRenderers,
+  EuiSwitch,
+  EuiIcon,
+} from '../../../../src/components';
+
+import { Comparators } from '../../../../src/services';
 
 const selectRandom = (...array) => {
   const i = Math.floor(Math.random() * array.length);
@@ -32,7 +35,7 @@ const people = times(20, (index) => {
 function loadPage(pageIndex, pageSize, sort) {
   let list = people;
   if (sort) {
-    list = people.sort(Comparators.property(sort.key, sort.direction));
+    list = people.sort(Comparators.property(sort.field, sort.direction));
   }
   const from = pageIndex * pageSize;
   const items = list.slice(from, Math.min(from + pageSize, list.length));
@@ -105,37 +108,37 @@ export default class PeopleTable extends React.Component {
           }
         },
         {
-          key: 'firstName',
+          field: 'firstName',
           name: 'First Name',
           description: `Person's given name`,
           dataType: 'string',
           sortable: true
         },
         {
-          key: 'lastName',
+          field: 'lastName',
           name: 'Last Name',
           description: `Person's family name`,
           dataType: 'string'
         },
         {
-          key: 'nickname',
+          field: 'nickname',
           name: 'Nickname',
           description: `Person's nickname / online handle`,
-          render: ValueRenderers.link({
+          render: EuiValueRenderers.link({
             onClick: (value) => {
               window.open(`http://www.github.com/${value}`, '_blank');
             }
           })
         },
         {
-          key: 'dateOfBirth',
+          field: 'dateOfBirth',
           name: 'Date of Birth',
           description: `Person's date of birth`,
-          render: ValueRenderers.date.with({ format: 'D MMM YYYY' }),
+          render: EuiValueRenderers.date.with({ format: 'D MMM YYYY' }),
           sortable: true
         },
         {
-          key: 'online',
+          field: 'online',
           name: 'Online',
           description: `Is this person is currently online?`,
           render: (online, person) => {

diff --git a/src-docs/src/views/table_of_records/multiple_record_actions.js b/src-docs/src/views/table_of_records/multiple_record_actions.js
@@ -1,12 +1,21 @@
-import React from 'react';
+import React, {
+  Component,
+} from 'react';
 import uuid from 'uuid/v1';
 import { times } from 'lodash';
 
-import { EuiTableOfRecords } from '../../../../src/components';
-import { ValueRenderers } from '../../../../src/components/value_renderer';
-import { EuiHealth } from '../../../../src/components/health';
-import { Comparators } from '../../../../src/services/sort';
-import { EuiCheckbox } from '../../../../src/components/form/checkbox';
+import {
+  EuiTableOfRecords,
+  EuiHealth,
+  EuiCheckbox,
+  EuiSwitch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiValueRenderers,
+} from '../../../../src/components';
+
+import { Comparators } from '../../../../src/services';
 
 const selectRandom = (...array) => {
   const i = Math.floor(Math.random() * array.length);
@@ -33,7 +42,7 @@ const people = times(20, (index) => {
 function loadPage(pageIndex, pageSize, sort) {
   let list = people;
   if (sort) {
-    list = people.sort(Comparators.property(sort.key, sort.direction));
+    list = people.sort(Comparators.property(sort.field, sort.direction));
   }
   const from = pageIndex * pageSize;
   const items = list.slice(from, Math.min(from + pageSize, list.length));
@@ -45,16 +54,21 @@ function loadPage(pageIndex, pageSize, sort) {
   };
 }
 
-export default class PeopleTable extends React.Component {
-
+export default class PeopleTable extends Component {
   constructor(props) {
     super(props);
-    this.state = this.computeState({
-      page: {
-        index: 0,
-        size: 5
-      }
-    });
+
+    this.state = {
+      hasPagination: true,
+      hasSorting: true,
+      hasSelection: true,
+      ...this.computeState({
+        page: {
+          index: 0,
+          size: 5,
+        },
+      })
+    };
   }
 
   computeState(criteria) {
@@ -102,50 +116,55 @@ export default class PeopleTable extends React.Component {
   }
 
   render() {
+    const {
+      hasPagination,
+      hasSelection,
+      hasSorting,
+    } = this.state;
 
     const config = {
       recordId: 'id',
       columns: [
         {
-          key: 'firstName',
+          field: 'firstName',
           name: 'First Name',
           description: `Person's given name`,
           dataType: 'string',
-          sortable: true
+          sortable: hasSorting,
         },
         {
-          key: 'lastName',
+          field: 'lastName',
           name: 'Last Name',
           description: `Person's family name`,
           dataType: 'string'
         },
         {
-          key: 'nickname',
+          field: 'nickname',
           name: 'Nickname',
           description: `Person's nickname / online handle`,
-          render: ValueRenderers.link({
+          render: EuiValueRenderers.link({
             onClick: (value) => {
               window.open(`http://www.github.com/${value}`, '_blank');
             }
           })
         },
         {
-          key: 'dateOfBirth',
+          field: 'dateOfBirth',
           name: 'Date of Birth',
           description: `Person's date of birth`,
-          render: ValueRenderers.date.with({ format: 'D MMM YYYY' }),
-          sortable: true
+          render: EuiValueRenderers.date.with({ format: 'D MMM YYYY' }),
+          sortable: hasSorting,
         },
         {
-          key: 'online',
+          field: 'online',
           name: 'Online',
           description: `Is this person is currently online?`,
           render: (value) => {
             const color = value ? 'success' : 'danger';
             const content = value ? 'Online' : 'Offline';
             return <EuiHealth color={color}>{content}</EuiHealth>;
           },
-          sortable: true
+          sortable: hasSorting,
         },
         {
           name: '',
@@ -188,19 +207,64 @@ export default class PeopleTable extends React.Component {
         }
       ],
 
-      pagination: {
+      pagination: hasPagination ? {
         pageSizeOptions: [3, 5, 8]
-      },
+      } : undefined,
 
-      selection: {
+      selection: hasSelection ? {
         selectable: (record) => record.online,
         selectableMessage: person => !person.online ? `${person.firstName} is offline` : undefined
-      },
+      } : undefined,
 
       onDataCriteriaChange: (criteria) => this.onDataCriteriaChange(criteria)
+    };
+
+    const {
+      data,
+      criteria: {
+        page,
+        sort,
+      },
+    } = this.state;
 
+    const model = {
+      data,
+      criteria: {
+        page: hasPagination ? page : undefined,
+        sort: hasSorting ? sort : undefined,
+      },
     };
 
-    return <EuiTableOfRecords config={config} model={this.state}/>;
+    return (
+      <div>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiSwitch
+              label="Pagination"
+              checked={this.state.hasPagination}
+              onChange={() => { this.setState({ hasPagination: !this.state.hasPagination }); }}
+            />
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiSwitch
+              label="Sorting"
+              checked={this.state.hasSorting}
+              onChange={() => { this.setState({ hasSorting: !this.state.hasSorting }); }}
+            />
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiSwitch
+              label="Selection"
+              checked={this.state.hasSelection}
+              onChange={() => { this.setState({ hasSelection: !this.state.hasSelection }); }}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        <EuiTableOfRecords config={config} model={model} />
+      </div>
+    );
   }
 }