Move EuiBasicTable's itemId prop out of selection into a top-level prop

CHANGELOG.md

@@ -14,6 +14,10 @@
 - Made boolean matching in `EuiSearchBar` more exact so it doesn't match words starting with booleans, like "truest" or "offer" ([#776](https://github.com/elastic/eui/pull/776))
 - `EuiComboBox` do not setState or call refs once component is unmounted ([807](https://github.com/elastic/eui/pull/807) and [#813](https://github.com/elastic/eui/pull/813))
 
+**Breaking changes**
+
+- Move `EuiBasicTable`'s `itemId` prop from `selection` to a top-level property [#830](https://github.com/elastic/eui/pull/830)
+
 ## [`0.0.46`](https://github.com/elastic/eui/tree/v0.0.46)
 
 - Added `EuiDescribedFormGroup` component, a wrapper around `EuiFormRow`(s) ([#707](https://github.com/elastic/eui/pull/707))

src-docs/src/views/tables/actions/actions.js

@@ -262,7 +262,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: this.onSelectionChange
@@ -292,6 +291,7 @@ export class Table extends Component {
 
         <EuiBasicTable
           items={pageOfItems}
+          itemId="id"
           columns={columns}
           pagination={pagination}
           sorting={sorting}

src-docs/src/views/tables/basic/props_info.js

@@ -8,6 +8,11 @@ export const propsInfo = {
           required: true,
           type: { name: 'object[]' }
         },
+        itemId: {
+          description: 'describes how to extract a unique ID from each item, used for selections & expanded rows',
+          required: false,
+          type: { name: 'string | (item) => string' }
+        },
         compressed: {
           description: 'Makes the font and padding smaller for the entire table',
           type: { name: 'bool' }
@@ -88,11 +93,6 @@ export const propsInfo = {
     __docgenInfo: {
       _euiObjectType: 'type',
       props: {
-        itemId: {
-          description: 'describes how to extract a unique ID from each item',
-          required: true,
-          type: { name: 'string | (item) => string' }
-        },
         onSelectionChanged: {
           description: 'A callback that will be called whenever the item selection changes',
           required: false,

src-docs/src/views/tables/expanding_rows/expanding_rows.js

@@ -208,7 +208,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: this.onSelectionChange
@@ -219,6 +218,7 @@ export class Table extends Component {
         {deleteButton}
         <EuiBasicTable
           items={pageOfItems}
+          itemId="id"
           itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
           isExpandable={true}
           hasActions={true}

src-docs/src/views/tables/in_memory/in_memory_selection.js

@@ -217,7 +217,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: (selection) => this.setState({ selection })
@@ -227,6 +226,7 @@ export class Table extends Component {
       <div>
         <EuiInMemoryTable
           items={this.state.users}
+          itemId="id"
           error={this.state.error}
           loading={this.state.loading}
           message={this.state.message}

src-docs/src/views/tables/mobile/mobile.js

@@ -189,7 +189,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: this.onSelectionChange
@@ -219,6 +218,7 @@ export class Table extends Component {
 
         <EuiBasicTable
           items={pageOfItems}
+          itemId="id"
           columns={columns}
           pagination={pagination}
           sorting={sorting}

src-docs/src/views/tables/selection/selection.js

@@ -192,7 +192,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: this.onSelectionChange
@@ -203,6 +202,7 @@ export class Table extends Component {
         {deleteButton}
         <EuiBasicTable
           items={pageOfItems}
+          itemId="id"
           columns={columns}
           pagination={pagination}
           sorting={sorting}

src/components/basic_table/__snapshots__/in_memory_table.test.js.snap

@@ -308,6 +308,7 @@ exports[`EuiInMemoryTable with pagination and selection 1`] = `
       },
     ]
   }
+  itemId="id"
   itemIdToExpandedRowMap={Object {}}
   items={
     Array [
@@ -342,7 +343,6 @@ exports[`EuiInMemoryTable with pagination and selection 1`] = `
   responsive={true}
   selection={
     Object {
-      "itemId": "id",
       "onSelectionChanged": [Function],
     }
   }
@@ -400,6 +400,7 @@ exports[`EuiInMemoryTable with pagination, selection and sorting 1`] = `
       },
     ]
   }
+  itemId="id"
   itemIdToExpandedRowMap={Object {}}
   items={
     Array [
@@ -434,7 +435,6 @@ exports[`EuiInMemoryTable with pagination, selection and sorting 1`] = `
   responsive={true}
   selection={
     Object {
-      "itemId": "id",
       "onSelectionChanged": [Function],
     }
   }
@@ -476,6 +476,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting  and simple search
         },
       ]
     }
+    itemId="id"
     itemIdToExpandedRowMap={Object {}}
     items={
       Array [
@@ -510,7 +511,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting  and simple search
     responsive={true}
     selection={
       Object {
-        "itemId": "id",
         "onSelectionChanged": [Function],
       }
     }
@@ -546,6 +546,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and a single recor
       },
     ]
   }
+  itemId="id"
   itemIdToExpandedRowMap={Object {}}
   items={
     Array [
@@ -580,7 +581,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and a single recor
   responsive={true}
   selection={
     Object {
-      "itemId": "id",
       "onSelectionChanged": [Function],
     }
   }
@@ -605,6 +605,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and column rendere
       },
     ]
   }
+  itemId="id"
   itemIdToExpandedRowMap={Object {}}
   items={
     Array [
@@ -635,7 +636,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and column rendere
   responsive={true}
   selection={
     Object {
-      "itemId": "id",
       "onSelectionChanged": [Function],
     }
   }
@@ -697,6 +697,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
         },
       ]
     }
+    itemId="id"
     itemIdToExpandedRowMap={Object {}}
     items={
       Array [
@@ -723,7 +724,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
     responsive={true}
     selection={
       Object {
-        "itemId": "id",
         "onSelectionChanged": [Function],
       }
     }

src/components/basic_table/basic_table.behavior.test.js

@@ -16,6 +16,7 @@ describe('EuiBasicTable', () => {
             { id: '1', name: 'name1' },
             { id: '2', name: 'name2' }
           ],
+          itemId: 'id',
           columns: [
             {
               field: 'name',
@@ -24,7 +25,6 @@ describe('EuiBasicTable', () => {
             }
           ],
           selection: {
-            itemId: 'id',
             onSelectionChanged: () => {}
           },
           onChange: () => {}

src/components/basic_table/basic_table.js

@@ -111,13 +111,12 @@ export const ComputedColumnType = PropTypes.shape({
 
 export const ColumnType = PropTypes.oneOfType([FieldDataColumnType, ComputedColumnType, ActionsColumnType]);
 
-const ItemIdType = PropTypes.oneOfType([
+export const ItemIdType = PropTypes.oneOfType([
   PropTypes.string, // the name of the item id property
   PropTypes.func    // (item) => string
 ]);
 
 export const SelectionType = PropTypes.shape({
-  itemId: ItemIdType.isRequired,
   onSelectionChange: PropTypes.func, // (selection: Record[]) => void;,
   selectable: PropTypes.func, // (item) => boolean;
   selectableMessage: PropTypes.func // (selectable, item) => boolean;
@@ -129,6 +128,7 @@ const SortingType = PropTypes.shape({
 
 const BasicTablePropTypes = {
   items: PropTypes.array.isRequired,
+  itemId: ItemIdType,
   columns: PropTypes.arrayOf(ColumnType).isRequired,
   pagination: PaginationType,
   sorting: SortingType,
@@ -172,12 +172,12 @@ export class EuiBasicTable extends Component {
   }
 
   itemId(item) {
-    const { selection } = this.props;
-    if (selection) {
-      if (isFunction(selection.itemId)) {
-        return selection.itemId(item);
+    const { itemId } = this.props;
+    if (itemId) {
+      if (isFunction(itemId)) {
+        return itemId(item);
       }
-      return item[selection.itemId];
+      return item[itemId];
     }
   }
 
@@ -480,7 +480,7 @@ export class EuiBasicTable extends Component {
 
     const cells = [];
 
-    const itemId = selection ? this.itemId(item) : rowIndex;
+    const itemId = this.itemId(item) || rowIndex;
     const selected = !selection ? false : this.state.selection && !!this.state.selection.find(selectedRecord => (
       this.itemId(selectedRecord) === itemId
     ));

src/components/basic_table/basic_table.test.js

@@ -272,6 +272,7 @@ describe('EuiBasicTable', () => {
         { id: '2', name: 'name2' },
         { id: '3', name: 'name3' }
       ],
+      itemId: 'id',
       columns: [
         {
           field: 'name',
@@ -285,7 +286,6 @@ describe('EuiBasicTable', () => {
         totalItemCount: 5
       },
       selection: {
-        itemId: 'id',
         onSelectionChanged: () => undefined
       },
       onChange: () => {}
@@ -306,6 +306,7 @@ describe('EuiBasicTable', () => {
         { id: '2', name: 'name2' },
         { id: '3', name: 'name3' }
       ],
+      itemId: 'id',
       columns: [
         {
           field: 'name',
@@ -320,7 +321,6 @@ describe('EuiBasicTable', () => {
         totalItemCount: 5
       },
       selection: {
-        itemId: 'id',
         onSelectionChanged: () => undefined
       },
       sorting: {
@@ -344,6 +344,7 @@ describe('EuiBasicTable', () => {
         { id: '2', name: 'name2' },
         { id: '3', name: 'name3' }
       ],
+      itemId: 'id',
       columns: [
         {
           field: 'name',
@@ -359,7 +360,6 @@ describe('EuiBasicTable', () => {
         totalItemCount: 5
       },
       selection: {
-        itemId: 'id',
         onSelectionChanged: () => undefined
       },
       sorting: {
@@ -383,6 +383,7 @@ describe('EuiBasicTable', () => {
         { id: '2', count: 2 },
         { id: '3', count: 3 }
       ],
+      itemId: 'id',
       columns: [
         {
           field: 'count',
@@ -398,7 +399,6 @@ describe('EuiBasicTable', () => {
         totalItemCount: 5
       },
       selection: {
-        itemId: 'id',
         onSelectionChanged: () => undefined
       },
       sorting: {
@@ -423,6 +423,7 @@ describe('EuiBasicTable', () => {
         { id: '2', count: 2 },
         { id: '3', count: 3 }
       ],
+      itemId: 'id',
       columns: [
         {
           field: 'count',
@@ -439,7 +440,6 @@ describe('EuiBasicTable', () => {
         totalItemCount: 5
       },
       selection: {
-        itemId: 'id',
         onSelectionChanged: () => undefined
       },
       sorting: {
@@ -463,6 +463,7 @@ describe('EuiBasicTable', () => {
         { id: '2', name: 'name2' },
         { id: '3', name: 'name3' }
       ],
+      itemId: 'id',
       columns: [
         {
           field: 'name',
@@ -488,7 +489,6 @@ describe('EuiBasicTable', () => {
         totalItemCount: 5
       },
       selection: {
-        itemId: 'id',
         onSelectionChanged: () => undefined
       },
       sorting: {
@@ -512,6 +512,7 @@ describe('EuiBasicTable', () => {
         { id: '2', name: 'name2' },
         { id: '3', name: 'name3' }
       ],
+      itemId: 'id',
       columns: [
         {
           field: 'name',
@@ -543,7 +544,6 @@ describe('EuiBasicTable', () => {
         totalItemCount: 5
       },
       selection: {
-        itemId: 'id',
         onSelectionChanged: () => undefined
       },
       sorting: {