To make your table work responsively, please make sure you add the
following additional props
to the top level table component (EuiBasicTable or{' '}
EuiInMemoryTable):
-
+
isSelectable: if the table has a single column of
@@ -63,16 +63,15 @@ export const section = {
which may/may not be hidden in hover
-
+
The mobileOptions object can be passed to the{' '}
EuiTableRowCell directly or with each column item
provided to EuiBasicTable.
-
+
{exampleItem}
-
Note:
- You can also change basic table row cell props like{' '}
- truncateText and textOnly for
+ Note: You can also change basic table row cell props
+ like truncateText and textOnly for
mobile layouts, though you must also be passing a mobile specific render
function.
diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js
index aaccb37a24f..663a8c88a64 100644
--- a/src-docs/src/views/tables/paginated/paginated.js
+++ b/src-docs/src/views/tables/paginated/paginated.js
@@ -148,6 +148,7 @@ export const Table = () => {
/>
{
{
-
+ >
+
+
`;
@@ -1676,7 +1675,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
compressed={false}
data-test-subj="checkboxSelectRow-1"
disabled={false}
- id="_selection_column_1-checkbox"
+ id="__table_generated-id_selection_column_1-checkbox"
indeterminate={false}
onChange={[Function]}
title="Select this row"
@@ -1691,7 +1690,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
className="euiCheckbox__input"
data-test-subj="checkboxSelectRow-1"
disabled={false}
- id="_selection_column_1-checkbox"
+ id="__table_generated-id_selection_column_1-checkbox"
onChange={[Function]}
title="Select this row"
type="checkbox"
@@ -1769,7 +1768,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
compressed={false}
data-test-subj="checkboxSelectRow-2"
disabled={false}
- id="_selection_column_2-checkbox"
+ id="__table_generated-id_selection_column_2-checkbox"
indeterminate={false}
onChange={[Function]}
title="Select this row"
@@ -1784,7 +1783,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
className="euiCheckbox__input"
data-test-subj="checkboxSelectRow-2"
disabled={false}
- id="_selection_column_2-checkbox"
+ id="__table_generated-id_selection_column_2-checkbox"
onChange={[Function]}
title="Select this row"
type="checkbox"
@@ -1862,7 +1861,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
compressed={false}
data-test-subj="checkboxSelectRow-3"
disabled={false}
- id="_selection_column_3-checkbox"
+ id="__table_generated-id_selection_column_3-checkbox"
indeterminate={false}
onChange={[Function]}
title="Select this row"
@@ -1877,7 +1876,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
className="euiCheckbox__input"
data-test-subj="checkboxSelectRow-3"
disabled={false}
- id="_selection_column_3-checkbox"
+ id="__table_generated-id_selection_column_3-checkbox"
onChange={[Function]}
title="Select this row"
type="checkbox"
@@ -2346,18 +2345,17 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
-
+ >
+
+
`;
@@ -2477,18 +2475,17 @@ exports[`EuiBasicTable with pagination 1`] = `
-
+ >
+
+
`;
@@ -2735,18 +2732,17 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
-
+ >
+
+
`;
@@ -2866,19 +2862,17 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = `
-
+ >
+
+
`;
@@ -3065,18 +3059,17 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
-
+ >
+
+
`;
@@ -3356,18 +3349,17 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
-
+ >
+
+
`;
@@ -3554,18 +3546,17 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
-
+ >
+
+
`;
@@ -3752,18 +3743,17 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
-
+ >
+
+
`;
@@ -4061,18 +4051,17 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
-
+ >
+
+
`;
@@ -4259,18 +4248,17 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
-
+ >
+
+
`;
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 1dbfcfc7b44..5071811d5d9 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -307,93 +307,75 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
-
-