(null);
- useEffect(() => {
- setCustomGridBodyProps({
- ref: bodyRef,
- onScroll: () =>
- console.debug('scrollTop:', bodyRef.current?.scrollTop),
- });
- }, [setCustomGridBodyProps]);
-
- return (
- <>
- {visibleRows.map((row, rowIndex) => (
-
-
- {visibleColumns.map((column, colIndex) => {
- // Skip the row details cell - we'll render it manually outside of the flex wrapper
- if (column.id !== 'row-details') {
- return (
- |
- );
- }
- })}
-
- {showRowDetails && (
-
- |
-
- )}
-
- setAutoHeight(!autoHeight)}
- />
- setShowRowDetails(!showRowDetails)}
- />
-
-
- {visibleColumns.map((column, colIndex) => (
- |
- ))}
-
- ))}
-
- );
-};
-
-
- For extremely advanced use cases, the{' '}
- renderCustomGridBody prop may be used to take
- complete control over rendering the grid body. This may be useful
- for scenarios where the default{' '}
-
-
- Please note that this prop is meant to be an{' '}
- escape hatch , and should only be used if you know
- exactly what you are doing. Once a custom renderer is used, you are
- in charge of ensuring the grid has all the correct semantic and aria
- labels required by the{' '}
-
- data grid spec
-
- , and that keyboard focus and navigation still work in an accessible
- manner.
-
-
- ),
- demo: alert('action')}
+ iconType="faceHappy"
+ aria-label="Some action"
+ >
+ Some action
+
+ ),
+ ],
+ },
+ {
+ id: 'email',
+ displayAsText: 'Email address',
+ initialWidth: 130,
+ },
+ {
+ id: 'location',
+ displayAsText: 'Location',
+ },
+ {
+ id: 'date',
+ displayAsText: 'Date',
+ },
+ {
+ id: 'amount',
+ displayAsText: 'Amount',
+ },
+];
+
+/**
+ * Cell component
+ */
+export const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+ rowIndex,
+ columnId,
+}) => raw_data[rowIndex][columnId];
+
+/**
+ * Row details component
+ */
+// eslint-disable-next-line local/forward-ref
+const RenderRowDetails: EuiDataGridProps['renderCellValue'] = memo(
+ ({ setCellProps, rowIndex }) => {
+ setCellProps({ style: { width: '100%', height: 'auto' } });
+
+ // Mock data
+ const firstName = raw_data[rowIndex].name.split(', ')[1];
+ const hasFees = !!raw_data[rowIndex].feesOwed;
+
+ return (
+
+ {hasFees && (
+
+ Send an email reminder
+
+ )}
+
+ );
+ }
+);
+
+/**
+ * Control columns
+ */
+export const leadingControlColumns: EuiDataGridProps['leadingControlColumns'] =
+ [
+ {
+ id: 'selection',
+ width: 32,
+ headerCellRender: () => (
+ {}}
+ />
+ ),
+ rowCellRender: ({ rowIndex }) => (
+ {}}
+ />
+ ),
+ },
+ ];
+export const trailingControlColumns: EuiDataGridProps['trailingControlColumns'] =
+ [
+ {
+ id: 'actions',
+ width: 40,
+ headerCellRender: () => (
+
+ Actions
+
+ ),
+ rowCellRender: () => (
+ >) => {
+ // Column visibility
+ const [visibleColumns, setVisibleColumns] = useState(() =>
+ columns.map(({ id }) => id)
+ );
+
+ // Pagination
+ const [pagination, setPagination] = useState({ pageIndex: 0 });
+ const onChangePage = useCallback(
+ (pageIndex) => {
+ setPagination((pagination) => ({ ...pagination, pageIndex }));
+ },
+ []
+ );
+ const onChangePageSize = useCallback<
+ EuiDataGridPaginationProps['onChangeItemsPerPage']
+ >((pageSize) => {
+ setPagination((pagination) => ({ ...pagination, pageSize }));
+ }, []);
+
+ // Sorting
+ const [sortingColumns, setSortingColumns] = useState<
+ EuiDataGridColumnSortingConfig[]
+ >([]);
+ const onSort = useCallback((sortingColumns) => {
+ setSortingColumns(sortingColumns);
+ }, []);
+
+ return (
+
+
+
+ setVirtualized(!virtualized)}
+ />
+ setAutoHeight(!autoHeight)}
+ />
+
+
+
+ {virtualized ? (
+
+
+
+
+ );
+};
+
+export const DataGridCustomBodyExample = {
+ title: 'Custom body renderer',
+ text: (
+ <>
+
+ For extremely advanced use cases, the{' '}
+ renderCustomGridBody prop may be used to take
+ complete control over rendering the grid body. This may be useful for
+ scenarios where the default{' '}
+
+
+ Please note that this prop is meant to be an{' '}
+ escape hatch , and should only be used if you know
+ exactly what you are doing. Once a custom renderer is used, you are in
+ charge of ensuring the grid has all the correct semantic and aria labels
+ required by the{' '}
+
+ data grid spec
+
+ , and that keyboard focus and navigation still work in an accessible
+ manner.
+
+
+ ),
+ children: (
+ <>
+ (null);
+ useEffect(() => {
+ setCustomGridBodyProps({
+ ref: bodyRef,
+ onScroll: () => console.debug('scrollTop:', bodyRef.current?.scrollTop),
+ });
+ }, [setCustomGridBodyProps]);
+
+ return (
+ <>
+ {headerRow}
+ {visibleRows.map((row, rowIndex) => (
+
+
+ {visibleColumns.map((column, colIndex) => {
+ // Skip the row details cell - we'll render it manually outside of the flex wrapper
+ if (column.id !== 'row-details') {
+ return (
+ |
+ );
+ }
+ })}
+
+
+ |
+
+
;
+
+const Row = memo(
+ ({
+ rowIndex,
+ visibleColumns,
+ setRowHeight,
+ Cell,
+ }: CustomTimelineDataGridSingleRowProps) => {
+ const { euiTheme } = useEuiTheme();
+ const styles = {
+ row: css`
+ ${logicalCSS('width', 'fit-content')};
+ ${logicalCSS('border-bottom', euiTheme.border.thin)};
+ background-color: ${euiTheme.colors.emptyShade};
+ `,
+ rowCellsWrapper: css`
+ display: flex;
+ `,
+ rowDetailsWrapper: css`
+ /* Extra specificity needed to override EuiDataGrid's default styles */
+ && .euiDataGridRowCell__content {
+ display: block;
+ padding: 0;
+ }
+ `,
+ };
+ const rowRef = useRef(null);
+
+ useEffect(() => {
+ if (rowRef.current) {
+ setRowHeight(rowIndex, rowRef.current.offsetHeight);
+ }
+ }, [Cell, rowIndex, setRowHeight]);
+
+ return (
+
+
+ {visibleColumns.map((column, colIndex) => {
+ // Skip the row details cell - we'll render it manually outside of the flex wrapper
+ if (column.id !== 'row-details') {
+ return (
+ |
+ );
+ }
+ })}
+
+
+ |
+
+
(null);
+ useEffect(() => {
+ setCustomGridBodyProps({
+ ref: bodyRef,
+ onScroll: () => console.debug('scrollTop:', bodyRef.current?.scrollTop),
+ });
+ }, [setCustomGridBodyProps]);
+
+ const listRef = useRef>(null);
+ const rowHeights = useRef([]);
+
+ const setRowHeight = useCallback((index: number, height: number) => {
+ if (rowHeights.current[index] === height) return;
+ listRef.current?.resetAfterIndex(index);
+
+ rowHeights.current[index] = height;
+ }, []);
+
+ const getRowHeight = useCallback((index: number) => {
+ return rowHeights.current[index] ?? 100;
+ }, []);
+
+ const outer = useMemo(
+ () =>
+ forwardRef>(
+ ({ children, ...rest }, ref) => {
+ return (
+
+ {headerRow}
+ {children}
+ {footerRow}
+
+ );
+ }
+ ),
+ [headerRow, footerRow]
+ );
+
+ const inner = useMemo(
+ () =>
+ forwardRef>(
+ ({ children, style, ...rest }, ref) => {
+ return (
+
+ {children}
+
+ );
+ }
+ ),
+ []
+ );
+
+ return (
+
+ {({ height }: { height: number }) => {
+ return (
+ `${height}-${visibleRows.length}-${index}`}
+ outerElementType={outer}
+ innerElementType={inner}
+ overscanCount={0}
+ layout="vertical"
+ >
+ {({ index: rowIndex, style }) => {
+ return (
+
+ |
+
+ );
+ }}
+
+ );
+ }}
+
+ );
+ }
+);
+CustomVirtualizedGridBody.displayName = 'CustomVirtualizedGridBody';
+
+export default () => (
+
{visibleColumns.map((column, colIndex) => (
@@ -41,6 +44,7 @@ describe('EuiDataGridBodyCustomRender', () => {
))}
))}
+ {footerRow}
);
};
diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_custom.test.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_custom.test.tsx
index 43012117206a..1620054e0274 100644
--- a/packages/eui/src/components/datagrid/body/data_grid_body_custom.test.tsx
+++ b/packages/eui/src/components/datagrid/body/data_grid_body_custom.test.tsx
@@ -37,6 +37,8 @@ describe('EuiDataGridBodyCustomRender', () => {
const CustomGridBody: EuiDataGridProps['renderCustomGridBody'] = ({
visibleColumns,
visibleRowData,
+ headerRow,
+ footerRow,
Cell,
}) => {
const visibleRows = raw_data.slice(
@@ -45,6 +47,7 @@ describe('EuiDataGridBodyCustomRender', () => {
);
return (
<>
+ {headerRow}
{visibleRows.map((row, rowIndex) => (
{visibleColumns.map((column, colIndex) => (
@@ -56,6 +59,7 @@ describe('EuiDataGridBodyCustomRender', () => {
))}
))}
+ {footerRow}
);
};
diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx
index 2cd174c007b9..513623263f56 100644
--- a/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx
+++ b/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx
@@ -8,9 +8,10 @@
import React, {
FunctionComponent,
+ JSXElementConstructor,
useState,
useMemo,
- useCallback,
+ memo,
} from 'react';
import classNames from 'classnames';
@@ -26,186 +27,251 @@ import { useDataGridHeader } from './header';
import { useDataGridFooter } from './footer';
import { CellWrapper } from './cell';
-export const EuiDataGridBodyCustomRender: FunctionComponent<
- EuiDataGridBodyProps
-> = ({
- renderCustomGridBody,
- renderCellValue,
- cellContext,
- renderCellPopover,
- renderFooterCellValue,
- interactiveCellId,
- visibleRows,
- visibleColCount,
- leadingControlColumns,
- trailingControlColumns,
- columns,
- setVisibleColumns,
- switchColumnPos,
- onColumnResize,
- schema,
- schemaDetectors,
- sorting,
- pagination,
- rowHeightsOptions,
- gridWidth,
- gridStyles,
- className,
-}) => {
- /**
- * Columns & widths
- */
- const visibleColumns = useMemo(() => {
- return [...leadingControlColumns, ...columns, ...trailingControlColumns];
- }, [columns, leadingControlColumns, trailingControlColumns]);
-
- // compute the default column width from the container's width and count of visible columns
- const defaultColumnWidth = useDefaultColumnWidth(
- gridWidth,
- leadingControlColumns,
- trailingControlColumns,
- columns
- );
-
- const { columnWidths, setColumnWidth } = useColumnWidths({
- columns,
- leadingControlColumns,
- trailingControlColumns,
- defaultColumnWidth,
- onColumnResize,
- });
-
- /**
- * Row heights
- */
- const rowHeightUtils = useRowHeightUtils({
- rowHeightsOptions,
- gridStyles,
- columns,
- });
-
- const { setRowHeight, getRowHeight } = useDefaultRowHeight({
- rowHeightsOptions,
- rowHeightUtils,
- });
-
- /**
- * Header & footer
- */
- const { headerRow } = useDataGridHeader({
- leadingControlColumns,
- trailingControlColumns,
- columns,
- columnWidths,
- defaultColumnWidth,
- setColumnWidth,
- visibleColCount,
- setVisibleColumns,
- switchColumnPos,
- sorting,
- schema,
- schemaDetectors,
- gridStyles,
- });
-
- const { footerRow } = useDataGridFooter({
- renderFooterCellValue,
- renderCellPopover,
- rowIndex: visibleRows.visibleRowCount,
- visibleRowIndex: visibleRows.visibleRowCount,
- visibleColCount,
- interactiveCellId,
- leadingControlColumns,
- trailingControlColumns,
- columns,
- columnWidths,
- defaultColumnWidth,
- schema,
- gridStyles,
- });
-
- /**
- * Cell render fn
- */
- const cellProps = useMemo(() => {
- return {
- schema,
- schemaDetectors,
- pagination,
- columns,
- leadingControlColumns,
- trailingControlColumns,
- visibleColCount,
- columnWidths,
- defaultColumnWidth,
+export const EuiDataGridBodyCustomRender: FunctionComponent =
+ memo(
+ ({
+ renderCustomGridBody,
renderCellValue,
cellContext,
renderCellPopover,
+ renderFooterCellValue,
interactiveCellId,
- setRowHeight,
+ visibleRows,
+ visibleColCount,
+ leadingControlColumns,
+ trailingControlColumns,
+ columns,
+ setVisibleColumns,
+ switchColumnPos,
+ onColumnResize,
+ schema,
+ schemaDetectors,
+ sorting,
+ pagination,
rowHeightsOptions,
- rowHeightUtils,
+ gridWidth,
gridStyles,
- };
- }, [
- schema,
- schemaDetectors,
- pagination,
- columns,
- leadingControlColumns,
- trailingControlColumns,
- visibleColCount,
- columnWidths,
- defaultColumnWidth,
- renderCellValue,
- cellContext,
- renderCellPopover,
- interactiveCellId,
- setRowHeight,
- rowHeightsOptions,
- rowHeightUtils,
- gridStyles,
- ]);
-
- const Cell = useCallback(
- ({ colIndex, visibleRowIndex, ...rest }) => {
- const style = {
- height: rowHeightUtils.isAutoHeight(visibleRowIndex, rowHeightsOptions)
- ? 'auto'
- : getRowHeight(visibleRowIndex),
- };
- const props = {
- colIndex,
- visibleRowIndex,
- style,
- ...cellProps,
- };
- return ({});
-
- return (
-
- {headerRow}
- {renderCustomGridBody!({
- visibleColumns,
- visibleRowData: visibleRows,
- Cell,
- setCustomGridBodyProps,
- })}
- {footerRow}
-
+ const { footerRow } = useDataGridFooter(footerRowProps);
+
+ /**
+ * Cell render fn
+ */
+ const cellProps = useMemo(() => {
+ return {
+ schema,
+ schemaDetectors,
+ pagination,
+ columns,
+ leadingControlColumns,
+ trailingControlColumns,
+ visibleColCount,
+ columnWidths,
+ defaultColumnWidth,
+ renderCellValue,
+ cellContext,
+ renderCellPopover,
+ interactiveCellId,
+ setRowHeight,
+ rowHeightsOptions,
+ rowHeightUtils,
+ gridStyles,
+ };
+ }, [
+ schema,
+ schemaDetectors,
+ pagination,
+ columns,
+ leadingControlColumns,
+ trailingControlColumns,
+ visibleColCount,
+ columnWidths,
+ defaultColumnWidth,
+ renderCellValue,
+ cellContext,
+ renderCellPopover,
+ interactiveCellId,
+ setRowHeight,
+ rowHeightsOptions,
+ rowHeightUtils,
+ gridStyles,
+ ]);
+
+ const Cell: EuiDataGridCustomBodyProps['Cell'] = useMemo(
+ () =>
+ ({ colIndex, visibleRowIndex, ...rest }) => {
+ const style = {
+ height: rowHeightUtils.isAutoHeight(
+ visibleRowIndex,
+ rest.rowHeightsOptions ?? rowHeightsOptions
+ )
+ ? 'auto'
+ : getRowHeight(visibleRowIndex),
+ };
+
+ const props = {
+ colIndex,
+ visibleRowIndex,
+ style,
+ ...cellProps,
+ };
+ return ({});
+
+ const customDataGridBodyProps: EuiDataGridCustomBodyProps = useMemo(
+ () => ({
+ gridWidth,
+ visibleColumns,
+ visibleRowData: visibleRows,
+ Cell,
+ setCustomGridBodyProps,
+ headerRow,
+ footerRow,
+ }),
+ [
+ gridWidth,
+ visibleColumns,
+ visibleRows,
+ Cell,
+ setCustomGridBodyProps,
+ headerRow,
+ footerRow,
+ ]
+ );
+
+ const BodyElement =
+ renderCustomGridBody as JSXElementConstructor;
+
+ return (
+
+
+ );
+ }
);
-};
+
+EuiDataGridBodyCustomRender.displayName = 'EuiDataGridBodyCustomRender';
diff --git a/packages/eui/src/components/datagrid/data_grid_types.ts b/packages/eui/src/components/datagrid/data_grid_types.ts
index d4983b13af83..a2f459f6bbf5 100644
--- a/packages/eui/src/components/datagrid/data_grid_types.ts
+++ b/packages/eui/src/components/datagrid/data_grid_types.ts
@@ -516,6 +516,19 @@ export interface EuiDataGridCustomBodyProps {
* It's best to wrap calls to `setCustomGridBodyProps` in a `useEffect` hook
*/
setCustomGridBodyProps: (props: EuiDataGridSetCustomGridBodyProps) => void;
+
+ /**
+ * The width of the grid, can be used by consumer as a layout utility
+ */
+ gridWidth: number;
+ /**
+ * Header row component to render by custom renderer
+ * */
+ headerRow: React.JSX.Element;
+ /**
+ * Footer row component to render by custom renderer
+ * */
+ footerRow: React.JSX.Element | null;
}
export type EuiDataGridSetCustomGridBodyProps = CommonProps &