Final tables PR: cleanup, tests, stories (#7642)

elastic · Apr 5, 2024 · 65b8c5c · 65b8c5c
1 parent 7725261
commit 65b8c5c
Show file tree

Hide file tree

Showing 48 changed files with 1,027 additions and 702 deletions.
diff --git a/changelogs/upcoming/7642.md b/changelogs/upcoming/7642.md
@@ -0,0 +1,15 @@
+**Bug fixes**
+
+- Table `mobileOptions`:
+  - `mobileOptions.align` is now respected instead of all cells being forced to left alignment
+  - `textTruncate` and `textOnly` are now respected even if a `render` function is not passed
+
+**Breaking changes**
+
+- Removed top-level `textOnly` prop from `EuiBasicTable` and `EuiInMemoryTable`. Use `columns[].textOnly` instead.
+
+**DOM changes**
+
+- `EuiTableRowCell` no longer renders mobile headers to the DOM unless the current table is displaying its responsive view.
+- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on mobile if their columns' `mobileOptions.show` is set to `false`.
+- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on desktop if their columns' `mobileOptions.only` is set to `true`.
diff --git a/src-docs/src/views/tables/actions/actions.tsx b/src-docs/src/views/tables/actions/actions.tsx
@@ -74,9 +74,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     sortable: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,
@@ -202,7 +202,7 @@ export default () => {
       if (multiAction) {
         actions = [
           {
-            name: <span>Clone</span>,
+            name: <>Clone</>,
             description: 'Clone this user',
             icon: 'copy',
             type: 'icon',

diff --git a/src-docs/src/views/tables/auto/auto.tsx b/src-docs/src/views/tables/auto/auto.tsx
@@ -46,9 +46,9 @@ const columns: Array<EuiTableFieldDataColumnType<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,

diff --git a/src-docs/src/views/tables/basic/basic.tsx b/src-docs/src/views/tables/basic/basic.tsx
@@ -48,9 +48,9 @@ export default () => {
       'data-test-subj': 'firstNameCell',
       mobileOptions: {
         render: (user: User) => (
-          <span>
+          <>
             {user.firstName} {user.lastName}
-          </span>
+          </>
         ),
         header: false,
         truncateText: false,

diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js
@@ -10,13 +10,15 @@ import {
 import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
-  EuiTableComputedColumnType,
-  EuiTableActionsColumnType,
   EuiTableSelectionType,
   EuiTableSortingType,
 } from '!!prop-loader!../../../../../src/components/basic_table/table_types';
 import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
-import { DefaultItemActionProps as DefaultItemAction } from '../props/props';
+import {
+  EuiTableComputedColumnType,
+  EuiTableActionsColumnType,
+  DefaultItemActionProps as DefaultItemAction,
+} from '../props/props';
 
 const source = require('!!raw-loader!./basic');
 

diff --git a/src-docs/src/views/tables/custom/custom.tsx b/src-docs/src/views/tables/custom/custom.tsx
@@ -113,10 +113,10 @@ export default class extends Component<{}, State> {
     {
       id: 2,
       title: (
-        <span>
+        <>
           A very long line in an ELEMENT which will wrap on narrower screens and
           NOT become truncated and replaced by an ellipsis
-        </span>
+        </>
       ),
       type: 'user',
       dateCreated: 'Tue Dec 01 2016',
@@ -127,11 +127,11 @@ export default class extends Component<{}, State> {
       id: 3,
       title: {
         value: (
-          <span>
+          <>
             A very long line in an ELEMENT which will not wrap on narrower
             screens and instead will become truncated and replaced by an
             ellipsis
-          </span>
+          </>
         ),
         truncateText: true,
       },
@@ -290,14 +290,14 @@ export default class extends Component<{}, State> {
         width: '100%',
       },
       render: (title: DataItem['title'], item: DataItem) => (
-        <span>
+        <>
           <EuiIcon
             type={item.type}
             size="m"
             style={{ verticalAlign: 'text-top' }}
           />{' '}
           {title as ReactNode}
-        </span>
+        </>
       ),
     },
     {

diff --git a/src-docs/src/views/tables/custom/custom_section.js b/src-docs/src/views/tables/custom/custom_section.js
@@ -29,7 +29,7 @@ export const section = {
     },
   ],
   text: (
-    <div>
+    <>
       <p>
         As an alternative to <strong>EuiBasicTable</strong> you can instead
         construct a table from individual{' '}
@@ -58,7 +58,7 @@ export const section = {
         &nbsp;and <strong>EuiTableSortMobileItem</strong> components to supply
         mobile sorting. See demo below.
       </p>
-    </div>
+    </>
   ),
   components: { EuiTable },
   props: {

diff --git a/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx b/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx
@@ -52,9 +52,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,
@@ -134,9 +134,10 @@ export default () => {
       isExpander: true,
       name: (
         <EuiScreenReaderOnly>
-          <span>Expand rows</span>
+          <span>Expand row</span>
         </EuiScreenReaderOnly>
       ),
+      mobileOptions: { header: false },
       render: (user: User) => {
         const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
 

diff --git a/src-docs/src/views/tables/footer/footer.tsx b/src-docs/src/views/tables/footer/footer.tsx
@@ -51,9 +51,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,
@@ -72,7 +72,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   {
     field: 'github',
     name: 'Github',
-    footer: ({ items }: { items: User[] }) => <span>{items.length} users</span>,
+    footer: ({ items }: { items: User[] }) => <>{items.length} users</>,
     render: (username: User['github']) => (
       <EuiLink href="#" target="_blank">
         {username}
@@ -96,7 +96,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
       const uniqueCountries = new Set(
         items.map((user) => user.location.country)
       );
-      return <span>{uniqueCountries.size} countries</span>;
+      return <>{uniqueCountries.size} countries</>;
     },
     render: (location: User['location']) => {
       return `${location.city}, ${location.country}`;
@@ -106,9 +106,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     field: 'online',
     name: 'Online',
     footer: ({ items }: { items: User[] }) => {
-      return (
-        <span>{items.filter((user: User) => !!user.online).length} online</span>
-      );
+      return <>{items.filter((user: User) => !!user.online).length} online</>;
     },
     dataType: 'boolean',
     render: (online: User['online']) => {

diff --git a/src-docs/src/views/tables/in_memory/in_memory.tsx b/src-docs/src/views/tables/in_memory/in_memory.tsx
@@ -47,9 +47,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,

diff --git a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.tsx b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.tsx
@@ -49,9 +49,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,

diff --git a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js
@@ -12,13 +12,13 @@ import {
 import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
-  EuiTableComputedColumnType,
-  EuiTableActionsColumnType,
   EuiTableSelectionType,
   EuiTableSortingType,
 } from '!!prop-loader!../../../../../src/components/basic_table/table_types';
 import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
 import {
+  EuiTableComputedColumnType,
+  EuiTableActionsColumnType,
   DefaultItemActionProps as DefaultItemAction,
   SearchProps as Search,
   SearchFilterConfigProps as SearchFilterConfig,
@@ -37,22 +37,22 @@ export const controlledPaginationSection = {
     },
   ],
   text: (
-    <div>
+    <>
       <p>
         By default <EuiCode>EuiInMemoryTable</EuiCode> resets its page index
         when receiving a new <EuiCode>EuiInMemoryTable</EuiCode> array. To avoid
-        this behavior the pagination object optionally takes a
+        this behavior the pagination object optionally takes a{' '}
         <EuiCode>pageIndex</EuiCode> value to control this yourself.
         Additionally, <EuiCode>pageSize</EuiCode> can also be controlled the
-        same way. Both of these are provided to your app during the
+        same way. Both of these are provided to your app during the{' '}
         <EuiCode>onTableChange</EuiCode> callback.
       </p>
       <p>
         The example below updates the array of users every second, randomly
         toggling their online status. Pagination state is maintained by the app,
         preventing it from being reset by the updates.
       </p>
-    </div>
+    </>
   ),
   props: {
     EuiInMemoryTable,

diff --git a/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js b/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js
@@ -12,13 +12,13 @@ import {
 import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
-  EuiTableComputedColumnType,
-  EuiTableActionsColumnType,
   EuiTableSelectionType,
   EuiTableSortingType,
 } from '!!prop-loader!../../../../../src/components/basic_table/table_types';
 import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
 import {
+  EuiTableComputedColumnType,
+  EuiTableActionsColumnType,
   DefaultItemActionProps as DefaultItemAction,
   SearchProps as Search,
   SearchFilterConfigProps as SearchFilterConfig,
@@ -37,16 +37,14 @@ export const customSortingSection = {
     },
   ],
   text: (
-    <div>
-      <p>
-        Sometimes the value displayed in a column is not appropriate to use for
-        sorting, such as pre-formatting values to be human-readable. In these
-        cases it&apos;s possible to pass the <EuiCode>sortable</EuiCode> prop as
-        a function instead of <EuiCode>true</EuiCode> or{' '}
-        <EuiCode>false</EuiCode>. The function is used to extract or calculate
-        the intended sort value for each <EuiCode>item</EuiCode>.
-      </p>
-    </div>
+    <p>
+      Sometimes the value displayed in a column is not appropriate to use for
+      sorting, such as pre-formatting values to be human-readable. In these
+      cases it&apos;s possible to pass the <EuiCode>sortable</EuiCode> prop as a
+      function instead of <EuiCode>true</EuiCode> or <EuiCode>false</EuiCode>.
+      The function is used to extract or calculate the intended sort value for
+      each <EuiCode>item</EuiCode>.
+    </p>
   ),
   props: {
     EuiInMemoryTable,

diff --git a/src-docs/src/views/tables/in_memory/in_memory_search.tsx b/src-docs/src/views/tables/in_memory/in_memory_search.tsx
@@ -54,9 +54,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,

diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx b/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx
@@ -48,9 +48,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,

diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js
@@ -11,13 +11,13 @@ import {
 import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
-  EuiTableComputedColumnType,
-  EuiTableActionsColumnType,
   EuiTableSelectionType,
   EuiTableSortingType,
 } from '!!prop-loader!../../../../../src/components/basic_table/table_types';
 import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
 import {
+  EuiTableComputedColumnType,
+  EuiTableActionsColumnType,
   DefaultItemActionProps as DefaultItemAction,
   SearchProps as Search,
   SearchFilterConfigProps as SearchFilterConfig,

diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx b/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx
@@ -77,9 +77,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,

diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js
@@ -11,13 +11,13 @@ import {
 import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
-  EuiTableComputedColumnType,
-  EuiTableActionsColumnType,
   EuiTableSelectionType,
   EuiTableSortingType,
 } from '!!prop-loader!../../../../../src/components/basic_table/table_types';
 import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
 import {
+  EuiTableComputedColumnType,
+  EuiTableActionsColumnType,
   DefaultItemActionProps as DefaultItemAction,
   SearchProps as Search,
   SearchFilterConfigProps as SearchFilterConfig,
@@ -36,12 +36,10 @@ export const searchExternalSection = {
     },
   ],
   text: (
-    <div>
-      <p>
-        The example shows how to configure <strong>EuiInMemoryTable</strong>{' '}
-        when both external and internal search/filter states are in use.
-      </p>
-    </div>
+    <p>
+      The example shows how to configure <strong>EuiInMemoryTable</strong> when
+      both external and internal search/filter states are in use.
+    </p>
   ),
   props: {
     EuiInMemoryTable,