Skip to content

Commit 68e2f99

Browse files
cee-chencee-chen
committed
EuiBasicTable - setup [TODO: hash out append API more]
1 parent fdaf8b3 commit 68e2f99

5 files changed

Lines changed: 77 additions & 37 deletions

File tree

‎packages/eui/src/components/basic_table/basic_table.tsx‎

Lines changed: 61 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import {
2626
RIGHT_ALIGNMENT,
2727
SortDirection,
2828
RenderWithEuiTheme,
29+
OverrideCopiedTabularContent,
30+
tabularCopyMarkers,
2931
} from '../../services';
3032
import { CommonProps } from '../common';
3133
import { isFunction } from '../../services/predicate';
@@ -547,18 +549,20 @@ export class EuiBasicTable<T extends object = any> extends Component<
547549
{this.renderSelectAll(true)}
548550
{this.renderTableMobileSort()}
549551
</EuiTableHeaderMobile>
550-
<EuiTable
551-
id={this.tableId}
552-
tableLayout={tableLayout}
553-
responsiveBreakpoint={responsiveBreakpoint}
554-
compressed={compressed}
555-
css={loading && safariLoadingWorkaround}
556-
>
557-
{this.renderTableCaption()}
558-
{this.renderTableHead()}
559-
{this.renderTableBody()}
560-
{this.renderTableFooter()}
561-
</EuiTable>
552+
<OverrideCopiedTabularContent>
553+
<EuiTable
554+
id={this.tableId}
555+
tableLayout={tableLayout}
556+
responsiveBreakpoint={responsiveBreakpoint}
557+
compressed={compressed}
558+
css={loading && safariLoadingWorkaround}
559+
>
560+
{this.renderTableCaption()}
561+
{this.renderTableHead()}
562+
{this.renderTableBody()}
563+
{this.renderTableFooter()}
564+
</EuiTable>
565+
</OverrideCopiedTabularContent>
562566
</>
563567
);
564568
}
@@ -664,7 +668,9 @@ export class EuiBasicTable<T extends object = any> extends Component<
664668
return (
665669
<EuiScreenReaderOnly>
666670
<caption css={euiTableCaptionStyles} className="euiTableCaption">
671+
{tabularCopyMarkers.ariaHiddenNoCopyBoundary}
667672
<EuiDelayRender>{captionElement}</EuiDelayRender>
673+
{tabularCopyMarkers.ariaHiddenNoCopyBoundary}
668674
</caption>
669675
</EuiScreenReaderOnly>
670676
);
@@ -733,7 +739,10 @@ export class EuiBasicTable<T extends object = any> extends Component<
733739

734740
if (selection) {
735741
headers.push(
736-
<EuiTableHeaderCellCheckbox key="_selection_column_h">
742+
<EuiTableHeaderCellCheckbox
743+
key="_selection_column_h"
744+
append={this.renderCopyChar(-1)}
745+
>
737746
{this.renderSelectAll(false)}
738747
</EuiTableHeaderCellCheckbox>
739748
);
@@ -754,15 +763,21 @@ export class EuiBasicTable<T extends object = any> extends Component<
754763

755764
const columnAlign = align || this.getAlignForDataType(dataType);
756765

766+
const sharedProps = {
767+
width,
768+
description,
769+
mobileOptions,
770+
align: columnAlign,
771+
append: this.renderCopyChar(index),
772+
};
773+
757774
// actions column
758775
if ((column as EuiTableActionsColumnType<T>).actions) {
759776
headers.push(
760777
<EuiTableHeaderCell
778+
{...sharedProps}
761779
key={`_actions_h_${index}`}
762780
align="right"
763-
width={width}
764-
description={description}
765-
mobileOptions={mobileOptions}
766781
>
767782
{name}
768783
</EuiTableHeaderCell>
@@ -785,14 +800,11 @@ export class EuiBasicTable<T extends object = any> extends Component<
785800
}
786801
headers.push(
787802
<EuiTableHeaderCell
803+
{...sharedProps}
788804
key={`_computed_column_h_${index}`}
789-
align={columnAlign}
790-
width={width}
791-
mobileOptions={mobileOptions}
792805
data-test-subj={`tableHeaderCell_${
793806
typeof name === 'string' ? name : ''
794807
}_${index}`}
795-
description={description}
796808
{...sorting}
797809
>
798810
{name}
@@ -829,12 +841,9 @@ export class EuiBasicTable<T extends object = any> extends Component<
829841
}
830842
headers.push(
831843
<EuiTableHeaderCell
844+
{...sharedProps}
832845
key={`_data_h_${String(field)}_${index}`}
833-
align={columnAlign}
834-
width={width}
835-
mobileOptions={mobileOptions}
836846
data-test-subj={`tableHeaderCell_${String(field)}_${index}`}
837-
description={description}
838847
{...sorting}
839848
>
840849
{name}
@@ -1056,7 +1065,11 @@ export class EuiBasicTable<T extends object = any> extends Component<
10561065
isExpandedRow={true}
10571066
hasSelection={!!selection}
10581067
>
1059-
<EuiTableRowCell colSpan={expandedRowColSpan} textOnly={false}>
1068+
<EuiTableRowCell
1069+
colSpan={expandedRowColSpan}
1070+
textOnly={false}
1071+
append={tabularCopyMarkers.hiddenNewline}
1072+
>
10601073
{itemIdToExpandedRowMap![itemId]}
10611074
</EuiTableRowCell>
10621075
</EuiTableRow>
@@ -1115,7 +1128,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
11151128
}
11161129
};
11171130
return [
1118-
<EuiTableRowCellCheckbox key={key}>
1131+
<EuiTableRowCellCheckbox key={key} append={this.renderCopyChar(-1)}>
11191132
<EuiI18n
11201133
token="euiBasicTable.selectThisRow"
11211134
default="Select row {index}"
@@ -1196,6 +1209,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
11961209
align="right"
11971210
textOnly={false}
11981211
hasActions={hasCustomActions ? 'custom' : true}
1212+
append={this.renderCopyChar(columnIndex)}
11991213
>
12001214
<ExpandedItemActions
12011215
actions={actualActions}
@@ -1221,7 +1235,14 @@ export class EuiBasicTable<T extends object = any> extends Component<
12211235
const value = get(item, field as string);
12221236
const content = contentRenderer(value, item);
12231237

1224-
return this.renderItemCell(item, column, key, content, setScopeRow);
1238+
return this.renderItemCell(
1239+
item,
1240+
column,
1241+
columnIndex,
1242+
key,
1243+
content,
1244+
setScopeRow
1245+
);
12251246
}
12261247

12271248
renderItemComputedCell(
@@ -1236,12 +1257,13 @@ export class EuiBasicTable<T extends object = any> extends Component<
12361257
const contentRenderer = render || this.getRendererForDataType();
12371258
const content = contentRenderer(item);
12381259

1239-
return this.renderItemCell(item, column, key, content, false);
1260+
return this.renderItemCell(item, column, columnIndex, key, content, false);
12401261
}
12411262

12421263
renderItemCell(
12431264
item: T,
12441265
column: EuiBasicTableColumn<T>,
1266+
columnIndex: number,
12451267
key: string | number,
12461268
content: ReactNode,
12471269
setScopeRow: boolean
@@ -1277,19 +1299,26 @@ export class EuiBasicTable<T extends object = any> extends Component<
12771299
setScopeRow={setScopeRow}
12781300
mobileOptions={{
12791301
...mobileOptions,
1280-
render:
1281-
mobileOptions && mobileOptions.render && mobileOptions.render(item),
1282-
header:
1283-
mobileOptions && mobileOptions.header === false ? false : name,
1302+
render: mobileOptions?.render?.(item),
1303+
header: mobileOptions?.header ?? name,
12841304
}}
12851305
{...cellProps}
12861306
{...rest}
1307+
append={this.renderCopyChar(columnIndex)}
12871308
>
12881309
{content}
12891310
</EuiTableRowCell>
12901311
);
12911312
}
12921313

1314+
renderCopyChar = (columnIndex: number) => {
1315+
const isLastColumn = columnIndex === this.props.columns.length - 1;
1316+
1317+
return isLastColumn
1318+
? tabularCopyMarkers.hiddenNewline
1319+
: tabularCopyMarkers.hiddenTab;
1320+
};
1321+
12931322
resolveColumnSortDirection = (column: EuiBasicTableColumn<T>) => {
12941323
const { sorting } = this.props;
12951324
const { sortable, field, name } = column as EuiTableFieldDataColumnType<T>;

‎packages/eui/src/components/table/table_header_cell.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import React, {
1010
FunctionComponent,
1111
HTMLAttributes,
1212
ThHTMLAttributes,
13+
ReactNode,
1314
} from 'react';
1415
import classNames from 'classnames';
1516

@@ -47,6 +48,7 @@ export type EuiTableHeaderCellProps = CommonProps &
4748
* Shows the sort indicator but removes the button
4849
*/
4950
readOnly?: boolean;
51+
append?: ReactNode;
5052
};
5153

5254
const CellContents = ({
@@ -128,6 +130,7 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
128130
style,
129131
readOnly,
130132
description,
133+
append,
131134
...rest
132135
}) => {
133136
const styles = useEuiMemoizedStyles(euiTableHeaderFooterCellStyles);
@@ -186,6 +189,7 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
186189
) : (
187190
<CellContents {...cellContentsProps} />
188191
)}
192+
{append}
189193
</CellComponent>
190194
);
191195
};

‎packages/eui/src/components/table/table_header_cell_checkbox.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Side Public License, v 1.
77
*/
88

9-
import React, { FunctionComponent, ThHTMLAttributes } from 'react';
9+
import React, { FunctionComponent, ThHTMLAttributes, ReactNode } from 'react';
1010
import classNames from 'classnames';
1111

1212
import { useEuiMemoizedStyles } from '../../services';
@@ -22,13 +22,14 @@ export type EuiTableHeaderCellCheckboxScope =
2222
export interface EuiTableHeaderCellCheckboxProps {
2323
width?: string | number;
2424
scope?: EuiTableHeaderCellCheckboxScope;
25+
append?: ReactNode;
2526
}
2627

2728
export const EuiTableHeaderCellCheckbox: FunctionComponent<
2829
CommonProps &
2930
ThHTMLAttributes<HTMLTableHeaderCellElement> &
3031
EuiTableHeaderCellCheckboxProps
31-
> = ({ children, className, scope = 'col', style, width, ...rest }) => {
32+
> = ({ children, className, scope = 'col', style, width, append, ...rest }) => {
3233
const classes = classNames('euiTableHeaderCellCheckbox', className);
3334
const styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles);
3435
const inlineStyles = resolveWidthAsStyle(style, width);
@@ -42,6 +43,7 @@ export const EuiTableHeaderCellCheckbox: FunctionComponent<
4243
{...rest}
4344
>
4445
<div className="euiTableCellContent">{children}</div>
46+
{append}
4547
</th>
4648
);
4749
};

‎packages/eui/src/components/table/table_row_cell.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export interface EuiTableRowCellProps extends EuiTableRowCellSharedPropsShape {
105105
* See #EuiTableRowCellMobileOptionsShape
106106
*/
107107
mobileOptions?: EuiTableRowCellMobileOptionsShape;
108+
append?: ReactNode;
108109
}
109110

110111
type Props = CommonProps &
@@ -125,6 +126,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
125126
width,
126127
valign = 'middle',
127128
mobileOptions,
129+
append,
128130
...rest
129131
}) => {
130132
const isResponsive = useEuiTableIsResponsive();
@@ -196,6 +198,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
196198
>
197199
{mobileOptions?.render || children}
198200
</EuiTableCellContent>
201+
{append}
199202
</Element>
200203
);
201204
}
@@ -209,6 +212,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
209212
<EuiTableCellContent {...sharedContentProps}>
210213
{children}
211214
</EuiTableCellContent>
215+
{append}
212216
</Element>
213217
);
214218
}

‎packages/eui/src/components/table/table_row_cell_checkbox.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Side Public License, v 1.
77
*/
88

9-
import React, { FunctionComponent, TdHTMLAttributes } from 'react';
9+
import React, { FunctionComponent, TdHTMLAttributes, ReactNode } from 'react';
1010
import classNames from 'classnames';
1111

1212
import { useEuiMemoizedStyles } from '../../services';
@@ -16,8 +16,8 @@ import { useEuiTableIsResponsive } from './mobile/responsive_context';
1616
import { euiTableCellCheckboxStyles } from './table_cells_shared.styles';
1717

1818
export const EuiTableRowCellCheckbox: FunctionComponent<
19-
CommonProps & TdHTMLAttributes<HTMLTableCellElement>
20-
> = ({ children, className, ...rest }) => {
19+
CommonProps & TdHTMLAttributes<HTMLTableCellElement> & { append?: ReactNode }
20+
> = ({ children, className, append, ...rest }) => {
2121
const isResponsive = useEuiTableIsResponsive();
2222

2323
const styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles);
@@ -31,6 +31,7 @@ export const EuiTableRowCellCheckbox: FunctionComponent<
3131
return (
3232
<td css={cssStyles} className={classes} {...rest}>
3333
<div className="euiTableCellContent">{children}</div>
34+
{append}
3435
</td>
3536
);
3637
};

0 commit comments

Comments
 (0)