{
// Numbers should be right aligned
expect(
- container.querySelectorAll('.euiTableCellContent--alignRight')
+ container.querySelectorAll('[class*="euiTableCellContent-right"]')
).toHaveLength(3);
// Booleans should output as Yes or No
@@ -704,7 +704,6 @@ describe('EuiBasicTable', () => {
const props: EuiBasicTableProps = {
items: basicItems,
columns: [
- ...basicColumns,
{
name: 'Actions',
actions: [
@@ -729,9 +728,21 @@ describe('EuiBasicTable', () => {
expect(queryByTestSubject('customAction-2')).toBeInTheDocument();
expect(queryByTestSubject('customAction-3')).not.toBeInTheDocument();
+ // TODO: These assertions should ideally be visual regression snapshots instead
expect(
container.querySelector('.euiTableRowCell--hasActions')!.className
).toContain('-customActions');
+ expect(
+ container.querySelector(
+ '.euiTableRowCell--hasActions .euiTableCellContent'
+ )!.className
+ ).not.toContain('-actions-mobile');
+ expect(
+ container.querySelector('.euiTableRow-hasActions')!.className
+ ).not.toContain('-hasRightColumn');
+ expect(
+ container.querySelector('.euiTableRow-hasActions')
+ ).toMatchSnapshot();
});
describe('are disabled on selection', () => {
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
index 2b060f15831..b486d9409db 100644
--- a/src/components/basic_table/basic_table.tsx
+++ b/src/components/basic_table/basic_table.tsx
@@ -987,18 +987,26 @@ export class EuiBasicTable extends Component<
rowSelectionDisabled = !!isDisabled;
}
- let hasActions;
+ let hasActions: 'custom' | boolean = false;
columns.forEach((column: EuiBasicTableColumn, columnIndex: number) => {
- if ((column as EuiTableActionsColumnType).actions) {
+ const columnActions = (column as EuiTableActionsColumnType).actions;
+
+ if (columnActions) {
+ const hasCustomActions = columnActions.some(
+ (action) => !!(action as CustomItemAction).render
+ );
cells.push(
this.renderItemActionsCell(
itemId,
item,
column as EuiTableActionsColumnType,
- columnIndex
+ columnIndex,
+ hasCustomActions
)
);
- hasActions = true;
+ // A table theoretically could have both custom and default action items
+ // If it has both, default action mobile row styles take precedence over custom
+ hasActions = !hasActions && hasCustomActions ? 'custom' : true;
} else if ((column as EuiTableFieldDataColumnType).field) {
const fieldDataColumn = column as EuiTableFieldDataColumnType;
cells.push(
@@ -1122,15 +1130,12 @@ export class EuiBasicTable extends Component<
itemId: ItemIdResolved,
item: T,
column: EuiTableActionsColumnType,
- columnIndex: number
+ columnIndex: number,
+ hasCustomActions: boolean
) {
// Disable all actions if any row(s) are selected
const allDisabled = this.state.selection.length > 0;
- const hasCustomActions = column.actions.some(
- (action: Action) => !!(action as CustomItemAction).render
- );
-
let actualActions = column.actions.filter(
(action: Action) => !action.available || action.available(item)
);
diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx
index be4af72f428..e4f8d89dc91 100644
--- a/src/components/basic_table/in_memory_table.test.tsx
+++ b/src/components/basic_table/in_memory_table.test.tsx
@@ -1438,7 +1438,7 @@ describe('EuiInMemoryTable', () => {
const columns = [{ field: 'title', name: 'Title' }];
const query = Query.parse('baz');
- const component = mount(
+ const { container } = render(
{
/>
);
- const tableContent = component.find(
+ const tableContent = container.querySelectorAll(
'.euiTableRowCell .euiTableCellContent'
);
expect(tableContent.length).toBe(1); // only 1 match
- expect(tableContent.at(0).text()).toBe('baz');
+ expect(tableContent[0]).toHaveTextContent('baz');
});
it('does not execute the Query and renders the items passed as is', () => {
@@ -1460,7 +1460,7 @@ describe('EuiInMemoryTable', () => {
const columns = [{ field: 'title', name: 'Title' }];
const query = Query.parse('baz');
- const component = mount(
+ const { container } = render(
{
/>
);
- const tableContent = component.find(
+ const tableContent = container.querySelectorAll(
'.euiTableRowCell .euiTableCellContent'
);
expect(tableContent.length).toBe(3);
- expect(tableContent.at(0).text()).toBe('foo');
- expect(tableContent.at(1).text()).toBe('bar');
- expect(tableContent.at(2).text()).toBe('baz');
+ expect(tableContent[0]).toHaveTextContent('foo');
+ expect(tableContent[1]).toHaveTextContent('bar');
+ expect(tableContent[2]).toHaveTextContent('baz');
});
});
diff --git a/src/components/basic_table/table_types.ts b/src/components/basic_table/table_types.ts
index 60856e1e2ee..657687ab9e6 100644
--- a/src/components/basic_table/table_types.ts
+++ b/src/components/basic_table/table_types.ts
@@ -121,9 +121,12 @@ export interface EuiTableComputedColumnType
*/
width?: string;
/**
- * Indicates whether this column should truncate its content when it doesn't fit
+ * Indicates whether this column should truncate overflowing text content.
+ * - Set to `true` to enable single-line truncation.
+ * - To enable multi-line truncation, use a configuration object with `lines`
+ * set to a number of lines to truncate to.
*/
- truncateText?: boolean;
+ truncateText?: EuiTableRowCellProps['truncateText'];
isExpander?: boolean;
align?: HorizontalAlignment;
/**
diff --git a/src/components/index.scss b/src/components/index.scss
index dcfd6a3c324..79063613970 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -7,4 +7,3 @@
@import 'form/index';
@import 'markdown_editor/index';
@import 'selectable/index';
-@import 'table/index';
diff --git a/src/components/table/__snapshots__/table.test.tsx.snap b/src/components/table/__snapshots__/table.test.tsx.snap
index 537abe6e504..afca98fa5d7 100644
--- a/src/components/table/__snapshots__/table.test.tsx.snap
+++ b/src/components/table/__snapshots__/table.test.tsx.snap
@@ -14,32 +14,32 @@ exports[`EuiTable renders 1`] = `
role="columnheader"
scope="col"
>
-
Hi Title
-
+
@@ -51,7 +51,7 @@ exports[`EuiTable renders 1`] = `
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
@@ -29,13 +29,13 @@ exports[`align renders center when specified 1`] = `
class="euiTableHeaderCell emotion-euiTableHeaderCell"
role="columnheader"
>
-
-
+
@@ -50,13 +50,13 @@ exports[`align renders right when specified 1`] = `
class="euiTableHeaderCell emotion-euiTableHeaderCell"
role="columnheader"
>
-
-
+
@@ -74,16 +74,16 @@ exports[`renders EuiTableHeaderCell 1`] = `
role="columnheader"
scope="col"
>
-
children
-
+
@@ -100,13 +100,13 @@ exports[`renders td when children is null/undefined 1`] = `
data-test-subj="test subject string"
role="columnheader"
>
-
-
+
@@ -124,11 +124,11 @@ exports[`sorting does not render a button with readOnly 1`] = `
role="columnheader"
scope="col"
>
-
Test
@@ -137,7 +137,7 @@ exports[`sorting does not render a button with readOnly 1`] = `
class="euiTableSortIcon"
data-euiicon-type="sortDown"
/>
-
+
@@ -155,11 +155,11 @@ exports[`sorting is rendered with isSortAscending 1`] = `
role="columnheader"
scope="col"
>
-
Test
@@ -168,7 +168,7 @@ exports[`sorting is rendered with isSortAscending 1`] = `
class="euiTableSortIcon"
data-euiicon-type="sortUp"
/>
-
+
@@ -186,11 +186,11 @@ exports[`sorting is rendered with isSorted 1`] = `
role="columnheader"
scope="col"
>
-
Test
@@ -199,7 +199,7 @@ exports[`sorting is rendered with isSorted 1`] = `
class="euiTableSortIcon"
data-euiicon-type="sortDown"
/>
-
+
@@ -222,11 +222,11 @@ exports[`sorting renders a button with onSort 1`] = `
data-test-subj="tableHeaderSortButton"
type="button"
>
-
Test
@@ -235,7 +235,7 @@ exports[`sorting renders a button with onSort 1`] = `
class="euiTableSortIcon"
data-euiicon-type="sortDown"
/>
-
+
@@ -253,16 +253,16 @@ exports[`width and style accepts style attribute 1`] = `
scope="col"
style="width: 20%;"
>
-
Test
-
+
@@ -279,16 +279,16 @@ exports[`width and style accepts width attribute 1`] = `
scope="col"
style="width: 10%;"
>
-
Test
-
+
@@ -305,16 +305,16 @@ exports[`width and style accepts width attribute as number 1`] = `
scope="col"
style="width: 100px;"
>
-