Custom body rendering

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 virtualized rendering is not desired, or where custom row layouts (e.g., the conditional row details cell below) are required.

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.

Custom virtualization

Constrained grid height

✄𐘗
tsx code block:
✄𐘗import React, { useEffect, useRef, memo } from 'react';
import { css } from '@emotion/react';
import {
  EuiDataGridCustomBodyProps,
  useEuiTheme,
  logicalCSS,
} from '@elastic/eui';

import { raw_data } from './data_columns_cells';
import CustomEuiDataGrid from './data_grid';

export const CustomUnvirtualizedGridBody = memo(
  ({
    Cell,
    visibleColumns,
    visibleRowData,
    setCustomGridBodyProps,
    headerRow,
    footerRow,
  }: EuiDataGridCustomBodyProps) => {
    // Ensure we're displaying correctly-paginated rows
    const visibleRows = raw_data.slice(
      visibleRowData.startRow,
      visibleRowData.endRow
    );

    // Add styling needed for custom grid body rows
    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;
        }
      `,
    };

    // Set custom props onto the grid body wrapper
    const bodyRef = useRef<HTMLDivElement | null>(null);
    useEffect(() => {
      setCustomGridBodyProps({
        ref: bodyRef,
        onScroll: () => console.debug('scrollTop:', bodyRef.current?.scrollTop),
      });
    }, [setCustomGridBodyProps]);

    return (
      <>
        {headerRow}
        {visibleRows.map((row, rowIndex) => (
          <div role="row" css={styles.row} key={rowIndex}>
            <div css={styles.rowCellsWrapper}>
              {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 (
                    <Cell
                      colIndex={colIndex}
                      visibleRowIndex={rowIndex}
                      key={`${rowIndex},${colIndex}`}
                    />
                  );
                }
              })}
            </div>
            <div css={styles.rowDetailsWrapper}>
              <Cell
                colIndex={visibleColumns.length - 1} // If the row is being shown, it should always be the last index
                visibleRowIndex={rowIndex}
              />
            </div>
          </div>
        ))}
        {footerRow}
      </>
    );
  }
);
CustomUnvirtualizedGridBody.displayName = 'CustomUnvirtualizedGridBody';

export default ({ autoHeight }: { autoHeight: boolean }) => (
  <CustomEuiDataGrid
    renderCustomGridBody={CustomUnvirtualizedGridBody}
    height={autoHeight ? undefined : 500}
  />
);

Props

EuiDataGridCustomBodyProps

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop Cell# ↦	Description and type When taking control of data grid rendering, the underlying EuiDataGridCell is passed as a prop for usage. You must pass in a valid colIndex and visibleRowIndex to this cell component. You may also pass in any other optional cell prop overrides that EuiDataGridCell accepts, such as isExpandable or renderCellValue. Type: JSXElementConstructor<{ colIndex: number; visibleRowIndex: number; } & Partial<EuiDataGridCellProps>> ↦	Default value Required ↵
Prop visibleColumns# ↦	Description and type The currently visible columns are passed to your data grid renderer so that your custom grid can automatically adjust to column hiding & reordering. Type: EuiDataGridColumn[] ↦	Default value Required ↵
Prop visibleRowData# ↦	Description and type The currently visible rows are passed to your data grid renderer so that your custom grid can automatically adjust to sorting and pagination. You will need to manually slice your data with startRow and endRow in order to simulate pagination. Type: { startRow: number; endRow: number; visibleRowCount: number; } ↦	Default value Required ↵
Prop setCustomGridBodyProps# ↦	Description and type Callback function to set custom props & attributes on the custom grid body's wrapping div element. It's best to wrap calls to setCustomGridBodyProps in a useEffect hook Type: (props: EuiDataGridSetCustomGridBodyProps) => void ↦	Default value Required ↵
Prop gridWidth# ↦	Description and type The width of the grid, can be used by consumer as a layout utility Type: number ↦	Default value Required ↵
Prop headerRow# ↦	Description and type Header row component to render by custom renderer Type: Element ↦	Default value Required ↵
Prop footerRow# ↦	Description and type Footer row component to render by custom renderer Type: Element ↦	Default value Required ↵

𐘂𐘂