Added support for default selections in EuiBasicTable

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `initialSelected` to `EuiTableSelectionType` properties to set initial selected checkboxes for `EuiBasicTable` ([#3418](https://github.com/elastic/eui/pull/3418))
 - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
 - Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451))
 - Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462))

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, Fragment, useRef } from 'react';
 import { formatDate } from '../../../../../src/services/format';
 import { createDataStore } from '../data_store';
 import {
@@ -7,6 +7,9 @@ import {
   EuiButton,
   EuiInMemoryTable,
   EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
 } from '../../../../../src/components';
 import { Random } from '../../../../../src/services/random';
 
@@ -61,6 +64,7 @@ export const Table = () => {
 
   const [selection, setSelection] = useState([]);
   const [error, setError] = useState();
+  const tableRef = useRef();
 
   const loadUsers = () => {
     setMessage('Loading users...');
@@ -208,16 +212,33 @@ export const Table = () => {
     pageSizeOptions: [3, 5, 8],
   };
 
+  const onlineUsers = store.users.filter(user => user.online);
+
   const selectionValue = {
     selectable: user => user.online,
     selectableMessage: selectable =>
       !selectable ? 'User is currently offline' : undefined,
     onSelectionChange: selection => setSelection(selection),
+    initialSelected: onlineUsers,
+  };
+
+  const onSelection = () => {
+    tableRef.current.setSelection(onlineUsers);
   };
 
   return (
-    <div>
+    <Fragment>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiButton onClick={onSelection}>Select online users</EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem />
+      </EuiFlexGroup>
+
+      <EuiSpacer size="l" />
+
       <EuiInMemoryTable
+        ref={tableRef}
         items={users}
         itemId="id"
         error={error}
@@ -230,6 +251,6 @@ export const Table = () => {
         selection={selectionValue}
         isSelectable={true}
       />
-    </div>
+    </Fragment>
   );
 };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { EuiCode } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
 import { renderToHtml } from '../../../services';
 
@@ -22,7 +23,13 @@ export const selectionSection = {
     <p>
       The following example shows how to use <strong>EuiInMemoryTable</strong>{' '}
       along with item selection. It also shows how you can display messages,
-      errors and show loading indication.
+      errors and show loading indication. You can set items to be selected
+      initially by passing an array of items as the{' '}
+      <EuiCode>initialSelected</EuiCode> value inside{' '}
+      <EuiCode>selection</EuiCode> property. You can also use the{' '}
+      <EuiCode>setSelection</EuiCode> method to take complete control over table
+      selection. This can be useful if you want to handle selection in table
+      based on user interaction with another part of the UI.
     </p>
   ),
   demo: <Table />,

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

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState, Fragment, useRef } from 'react';
 import { formatDate } from '../../../../../src/services/format';
 import { createDataStore } from '../data_store';
 
@@ -9,6 +9,7 @@ import {
   EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSpacer,
 } from '../../../../../src/components';
 
 /*
@@ -41,6 +42,7 @@ export const Table = () => {
   const [sortField, setSortField] = useState('firstName');
   const [sortDirection, setSortDirection] = useState('asc');
   const [selectedItems, setSelectedItems] = useState([]);
+  const tableRef = useRef();
 
   const onTableChange = ({ page = {}, sort = {} }) => {
     const { index: pageIndex, size: pageSize } = page;
@@ -176,17 +178,34 @@ export const Table = () => {
     },
   };
 
+  const onlineUsers = store.users.filter(user => user.online);
+
   const selection = {
     selectable: user => user.online,
     selectableMessage: selectable =>
       !selectable ? 'User is currently offline' : undefined,
     onSelectionChange: onSelectionChange,
+    initialSelected: onlineUsers,
+  };
+
+  const onSelection = () => {
+    tableRef.current.setSelection(onlineUsers);
   };
 
   return (
     <Fragment>
-      {deleteButton}
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiButton onClick={onSelection}>Select online users</EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem />
+        {deleteButton}
+      </EuiFlexGroup>
+
+      <EuiSpacer size="l" />
+
       <EuiBasicTable
+        ref={tableRef}
         items={pageOfItems}
         itemId="id"
         columns={columns}

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

@@ -23,7 +23,12 @@ export const section = {
     <p>
       The following example shows how to configure selection via the{' '}
       <EuiCode>selection</EuiCode>
-      property.
+      property. You can set items to be selected initially by passing an array
+      of items as the <EuiCode>initialSelected</EuiCode> value inside{' '}
+      <EuiCode>selection</EuiCode> property. You can also use the{' '}
+      <EuiCode>setSelection</EuiCode> method to take complete control over table
+      selection. This can be useful if you want to handle selection in table
+      based on user interaction with another part of the UI.
     </p>
   ),
   components: { EuiBasicTable },