diff --git a/package.json b/package.json index ee2c402b0e5..887a03e3299 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,11 @@ "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js", "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss", "build-pack": "yarn build && npm pack", + "check-types": "yarn tsc --noEmit", "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"", "compile-scss": "node ./scripts/compile-scss.js", "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings", - "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-css-in-js && yarn lint-sass", + "lint": "yarn check-types && yarn lint-es && yarn lint-css-in-js && yarn lint-sass", "lint-fix": "yarn lint-es --fix && yarn lint-css-in-js --fix", "lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0", "lint-css-in-js": "yarn stylelint \"**/*.styles.ts\" \"./src/themes/**/*.ts\" \"./src/global_styling/**/*.ts\" --quiet-deprecation-warnings", diff --git a/src-docs/src/views/datagrid/toolbar/additional_controls.tsx b/src-docs/src/views/datagrid/toolbar/additional_controls.tsx index d91c17d43d8..bb3a30b275a 100644 --- a/src-docs/src/views/datagrid/toolbar/additional_controls.tsx +++ b/src-docs/src/views/datagrid/toolbar/additional_controls.tsx @@ -17,6 +17,7 @@ import { EuiContextMenuPanel, EuiPopover, EuiDataGridPaginationProps, + renderCellValue, } from '../../../../../src'; const columns = [ @@ -49,6 +50,9 @@ for (let i = 1; i < 20; i++) { }); } +const renderCellValue: renderCellValue = ({ rowIndex, columnId }) => + data[rowIndex][columnId]; + export default () => { const [pagination, setPagination] = useState({ pageIndex: 0 }); const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); @@ -126,7 +130,7 @@ export default () => { border: 'horizontal', header: 'underline', }} - renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]} + renderCellValue={renderCellValue} pagination={{ ...pagination, onChangeItemsPerPage: setPageSize, diff --git a/src/components/datagrid/body/data_grid_body_custom.test.tsx b/src/components/datagrid/body/data_grid_body_custom.test.tsx index 43012117206..b8f33eca654 100644 --- a/src/components/datagrid/body/data_grid_body_custom.test.tsx +++ b/src/components/datagrid/body/data_grid_body_custom.test.tsx @@ -10,7 +10,7 @@ import React, { useEffect } from 'react'; import { fireEvent } from '@testing-library/react'; import { render } from '../../../test/rtl'; -import { EuiDataGridProps } from '../data_grid_types'; +import { EuiDataGridProps, renderCellValue } from '../data_grid_types'; import { dataGridBodyProps } from './data_grid_body.test'; import { EuiDataGridBodyCustomRender } from './data_grid_body_custom'; @@ -21,10 +21,8 @@ describe('EuiDataGridBodyCustomRender', () => { { columnA: 'hello', columnB: 'world' }, { columnA: 'lorem', columnB: 'ipsum' }, ]; - const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({ - rowIndex, - columnId, - }) => raw_data[rowIndex][columnId as keyof DataType]; + const RenderCellValue: renderCellValue = ({ rowIndex, columnId }) => + raw_data[rowIndex][columnId as keyof DataType]; const bodyProps = { ...dataGridBodyProps, diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index fac6ca20d3f..40b7708a34a 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import { mount, ReactWrapper } from 'enzyme'; -import { EuiDataGrid } from './'; +import { EuiDataGrid, renderCellValue } from './'; import { EuiDataGridProps } from './data_grid_types'; import { findTestSubject, requiredProps } from '../../test'; import { render } from '../../test/rtl'; @@ -386,6 +386,43 @@ function setColumnVisibility( closeColumnSelector(datagrid); } +const renderCellValueRowAndColumnCount: renderCellValue = ({ + rowIndex, + columnId, +}) => `${rowIndex}, ${columnId}`; + +const RenderCellValueSetCellProps: renderCellValue = ({ + rowIndex, + columnId, + setCellProps, +}) => { + useEffect(() => { + setCellProps({ + className: 'customClass', + 'data-test-subj': `cell-${rowIndex}-${columnId}`, + style: { color: columnId === 'A' ? 'red' : 'blue' }, + }); + }, [columnId, rowIndex, setCellProps]); + + return `${rowIndex}, ${columnId}`; +}; + +const renderCellBasedOnColumnId: renderCellValue = ({ columnId }) => { + if (columnId === 'A') { + return 5.5; + } else if (columnId === 'B') { + return 'true'; + } else { + return 'asdf'; + } +}; + +const renderCellRowAsValue: renderCellValue = ({ rowIndex }) => rowIndex; + +const renderCellValueALowBHigh: renderCellValue = ({ rowIndex, columnId }) => + // render A as 0, 1, 0, 1, 0 and B as 9->5 + columnId === 'A' ? rowIndex % 2 : 9 - rowIndex; + function moveColumnToIndex( datagrid: ReactWrapper, columnId: string, @@ -472,9 +509,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={3} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}, ${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -494,9 +529,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={3} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}, ${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -513,17 +546,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId, setCellProps }) => { - useEffect(() => { - setCellProps({ - className: 'customClass', - 'data-test-subj': `cell-${rowIndex}-${columnId}`, - style: { color: columnId === 'A' ? 'red' : 'blue' }, - }); - }, [columnId, rowIndex, setCellProps]); - - return `${rowIndex}, ${columnId}`; - }} + renderCellValue={RenderCellValueSetCellProps} /> ); @@ -653,9 +676,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={3} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}, ${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} toolbarVisibility={{ additionalControls: }} /> ); @@ -678,7 +699,7 @@ describe('EuiDataGrid', () => { width: 50, headerCellRender: () => leading heading, headerCellProps: { className: 'leadingControlCol' }, - rowCellRender: ({ rowIndex }) => rowIndex, + rowCellRender: renderCellRowAsValue, }, ]} trailingControlColumns={[ @@ -687,13 +708,11 @@ describe('EuiDataGrid', () => { width: 50, headerCellRender: () => trailing heading, headerCellProps: { className: 'trailingControlCol' }, - rowCellRender: ({ rowIndex }) => rowIndex, + rowCellRender: renderCellRowAsValue, }, ]} rowCount={3} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}, ${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} toolbarVisibility={{ additionalControls: }} /> ); @@ -766,9 +785,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={3} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}, ${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -804,15 +821,7 @@ describe('EuiDataGrid', () => { }} inMemory={{ level: 'pagination' }} rowCount={2} - renderCellValue={({ columnId }) => { - if (columnId === 'A') { - return 5.5; - } else if (columnId === 'B') { - return 'true'; - } else { - return 'asdf'; - } - }} + renderCellValue={renderCellBasedOnColumnId} /> ); @@ -842,9 +851,7 @@ describe('EuiDataGrid', () => { }} inMemory={{ level: 'pagination' }} rowCount={2} - renderCellValue={({ columnId }) => - columnId === 'A' ? 5.5 : 'true' - } + renderCellValue={renderCellBasedOnColumnId} /> ); @@ -871,6 +878,8 @@ describe('EuiDataGrid', () => { G: '2019-09-18T12:31:28.234', H: '2019-09-18T12:31:28.234+0300', }; + const renderCellValue: renderCellValue = ({ columnId }) => + values[columnId]; const component = mount( { }} inMemory={{ level: 'pagination' }} rowCount={1} - renderCellValue={({ columnId }) => values[columnId]} + renderCellValue={renderCellValue} /> ); @@ -906,6 +915,8 @@ describe('EuiDataGrid', () => { A: '-5.80', B: '127.0.0.1', }; + const renderCellValue: renderCellValue = ({ columnId }) => + values[columnId]; const component = mount( { ]} inMemory={{ level: 'pagination' }} rowCount={1} - renderCellValue={({ columnId }) => values[columnId]} + renderCellValue={renderCellValue} /> ); @@ -949,6 +960,13 @@ describe('EuiDataGrid', () => { describe('cell rendering', () => { it('supports hooks', () => { + const RenderCellValueWithHooks: renderCellValue = ({ + rowIndex, + columnId, + }) => { + const [value] = useState(`Hello, Row ${rowIndex}-${columnId}!`); + return {value}; + }; const component = mount( { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => { - const [value] = useState(`Hello, Row ${rowIndex}-${columnId}!`); - return {value}; - }} + renderCellValue={RenderCellValueWithHooks} /> ); expect(extractGridData(component)).toMatchInlineSnapshot(` @@ -994,7 +1009,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={10} - renderCellValue={({ rowIndex }) => rowIndex} + renderCellValue={renderCellRowAsValue} pagination={{ pageIndex: 1, pageSize: 6, @@ -1019,7 +1034,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={8} - renderCellValue={({ rowIndex }) => rowIndex} + renderCellValue={renderCellRowAsValue} pagination={{ pageIndex: 0, pageSize: 3, @@ -1080,7 +1095,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={8} - renderCellValue={({ rowIndex }) => rowIndex} + renderCellValue={renderCellRowAsValue} pagination={{ pageIndex: 0, pageSize: 3, @@ -1144,7 +1159,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={8} - renderCellValue={({ rowIndex }) => rowIndex} + renderCellValue={renderCellRowAsValue} pagination={{ pageIndex: 0, pageSize: 3, @@ -1366,30 +1381,28 @@ describe('EuiDataGrid', () => { columns={[{ id: 'ColumnA' }, { id: 'ColumnB' }]} columnVisibility={columnVisibility} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); expect(extractGridData(component)).toEqual([ ['ColumnA', 'ColumnB'], - ['0-ColumnA', '0-ColumnB'], - ['1-ColumnA', '1-ColumnB'], + ['0, ColumnA', '0, ColumnB'], + ['1, ColumnA', '1, ColumnB'], ]); setColumnVisibility(component, 'ColumnA', false); expect(extractGridData(component)).toEqual([ ['ColumnB'], - ['0-ColumnB'], - ['1-ColumnB'], + ['0, ColumnB'], + ['1, ColumnB'], ]); setColumnVisibility(component, 'ColumnA', true); expect(extractGridData(component)).toEqual([ ['ColumnA', 'ColumnB'], - ['0-ColumnA', '0-ColumnB'], - ['1-ColumnA', '1-ColumnB'], + ['0, ColumnA', '0, ColumnB'], + ['1, ColumnA', '1, ColumnB'], ]); }); @@ -1408,24 +1421,22 @@ describe('EuiDataGrid', () => { columns={[{ id: 'ColumnA' }, { id: 'ColumnB' }]} columnVisibility={columnVisibility} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); expect(extractGridData(component)).toEqual([ ['ColumnA', 'ColumnB'], - ['0-ColumnA', '0-ColumnB'], - ['1-ColumnA', '1-ColumnB'], + ['0, ColumnA', '0, ColumnB'], + ['1, ColumnA', '1, ColumnB'], ]); moveColumnToIndex(component, 'ColumnB', 0); expect(extractGridData(component)).toEqual([ ['ColumnB', 'ColumnA'], - ['0-ColumnB', '0-ColumnA'], - ['1-ColumnB', '1-ColumnA'], + ['0, ColumnB', '0, ColumnA'], + ['1, ColumnB', '1, ColumnA'], ]); }); @@ -1438,21 +1449,27 @@ describe('EuiDataGrid', () => { }, }; + const RenderCellValue: renderCellValue = ({ + rowIndex, + columnId, + setCellProps, + }) => { + useEffect(() => { + if (columnId === 'ColumnB') { + setCellProps({ style: { color: 'blue' } }); + } + }, [columnId, rowIndex, setCellProps]); + + return `${rowIndex}-${columnId}`; + }; + const component = mount( { - useEffect(() => { - if (columnId === 'ColumnB') { - setCellProps({ style: { color: 'blue' } }); - } - }, [columnId, rowIndex, setCellProps]); - - return `${rowIndex}-${columnId}`; - }} + renderCellValue={RenderCellValue} /> ); @@ -1488,9 +1505,7 @@ describe('EuiDataGrid', () => { }, ]} rowCount={1} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}, ${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -1542,6 +1557,9 @@ describe('EuiDataGrid', () => { describe('in-memory sorting', () => { it('sorts on initial render', () => { + const renderCellValue: renderCellValue = ({ rowIndex, columnId }) => + // render A 0->4 and B 9->5 + columnId === 'A' ? rowIndex : 9 - rowIndex; const component = mount( { setVisibleColumns: () => {}, }} rowCount={5} - renderCellValue={({ rowIndex, columnId }) => - // render A 0->4 and B 9->5 - columnId === 'A' ? rowIndex : 9 - rowIndex - } + renderCellValue={renderCellValue} inMemory={{ level: 'sorting' }} sorting={{ columns: [{ id: 'A', direction: 'desc' }], @@ -1583,10 +1598,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={5} - renderCellValue={({ rowIndex, columnId }) => - // render A as 0, 1, 0, 1, 0 and B as 9->5 - columnId === 'A' ? rowIndex % 2 : 9 - rowIndex - } + renderCellValue={renderCellValueALowBHigh} inMemory={{ level: 'sorting' }} sorting={{ columns: [ @@ -1623,10 +1635,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={5} - renderCellValue={({ rowIndex, columnId }) => - // render A as 0, 1, 0, 1, 0 and B as 9->5 - columnId === 'A' ? rowIndex % 2 : 9 - rowIndex - } + renderCellValue={renderCellValueALowBHigh} inMemory={{ level: 'sorting' }} sorting={{ columns: [], @@ -1670,6 +1679,8 @@ describe('EuiDataGrid', () => { component.setProps({ sorting: { columns, onSort } }); component.update(); }); + const renderCellValue: renderCellValue = ({ rowIndex }) => + `1.0.${(rowIndex % 3) + rowIndex}`; // computes as 0,2,4,3,5 const component = mount( { setVisibleColumns: () => {}, }} rowCount={5} - renderCellValue={ - ({ rowIndex }) => `1.0.${(rowIndex % 3) + rowIndex}` // computes as 0,2,4,3,5 - } + renderCellValue={renderCellValue} inMemory={{ level: 'sorting' }} sorting={{ columns: [], @@ -1715,6 +1724,9 @@ describe('EuiDataGrid', () => { }); it('uses schema information to sort', () => { + const renderCellValue: renderCellValue = ({ rowIndex, columnId }) => + // render A 0->4 and B 12->8 + columnId === 'A' ? rowIndex : 12 - rowIndex; const component = mount( { setVisibleColumns: () => {}, }} rowCount={5} - renderCellValue={({ rowIndex, columnId }) => - // render A 0->4 and B 12->8 - columnId === 'A' ? rowIndex : 12 - rowIndex - } + renderCellValue={renderCellValue} inMemory={{ level: 'sorting' }} sorting={{ columns: [{ id: 'B', direction: 'asc' }], @@ -1758,16 +1767,14 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); expect(extractGridData(component)).toEqual([ ['A', 'B'], - ['0-A', '0-B'], - ['1-A', '1-B'], + ['0, A', '0, B'], + ['1, A', '1, B'], ]); component.setProps({ @@ -1780,8 +1787,8 @@ describe('EuiDataGrid', () => { expect(extractGridData(component)).toEqual([ ['A', 'C'], - ['0-A', '0-C'], - ['1-A', '1-C'], + ['0, A', '0, C'], + ['1, A', '1, C'], ]); }); @@ -1795,9 +1802,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -1843,9 +1848,7 @@ describe('EuiDataGrid', () => { columns: [], }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -1895,9 +1898,7 @@ describe('EuiDataGrid', () => { columns: [], }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -1984,9 +1985,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -2033,9 +2032,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); const arrowA = findTestSubject( @@ -2078,9 +2075,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); const arrowC = findTestSubject( @@ -2104,9 +2099,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); const arrowD = findTestSubject( @@ -2169,9 +2162,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}-${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -2248,7 +2239,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={8} - renderCellValue={({ rowIndex }) => rowIndex} + renderCellValue={renderCellRowAsValue} rowHeightsOptions={{ defaultHeight: 50, rowHeights: { @@ -2328,9 +2319,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={8} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}, ${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} pagination={pagination} /> ); @@ -2527,9 +2516,7 @@ describe('EuiDataGrid', () => { setVisibleColumns: () => {}, }} rowCount={3} - renderCellValue={({ rowIndex, columnId }) => - `${rowIndex}, ${columnId}` - } + renderCellValue={renderCellValueRowAndColumnCount} /> ); @@ -2560,6 +2547,33 @@ describe('EuiDataGrid', () => { ).toEqual('1, B'); }); it.skip('supports arrow navigation through grids with different interactive cells', () => { + const renderCellValue: renderCellValue = ({ rowIndex, columnId }) => { + if (columnId === 'A') { + return `${rowIndex}, A`; + } + + if (columnId === 'B') { + return ; + } + + if (columnId === 'C') { + return ( + <> + , + + ); + } + + if (columnId === 'D') { + return ( +
+ {rowIndex}, +
+ ); + } + + return 'error'; + }; const component = mount( { setVisibleColumns: () => {}, }} rowCount={2} - renderCellValue={({ rowIndex, columnId }) => { - if (columnId === 'A') { - return `${rowIndex}, A`; - } - - if (columnId === 'B') { - return ; - } - - if (columnId === 'C') { - return ( - <> - , - - ); - } - - if (columnId === 'D') { - return ( -
- {rowIndex}, -
- ); - } - - return 'error'; - }} + renderCellValue={renderCellValue} /> ); @@ -2646,6 +2634,11 @@ describe('EuiDataGrid', () => { expect(focusableCell.getDOMNode()).toBe(document.activeElement); }); it.skip('allows user to enter and exit grid navigation', async () => { + const renderCellValue: renderCellValue = ({ rowIndex, columnId }) => ( + <> + , + + ); const component = mount( { setVisibleColumns: () => {}, }} rowCount={3} - renderCellValue={({ rowIndex, columnId }) => ( - <> - , - - )} + renderCellValue={renderCellValue} /> ); diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index 25c17f44569..dc4daddb25a 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -595,18 +595,23 @@ export interface EuiDataGridCellPopoverElementProps ) => void; } -type RenderCellContext = (args?: unknown) => T; +type RenderCellContext> = () => T; -export type EuiDataGridCellValueElementPropsWithContext = - EuiDataGridCellValueElementProps & ReturnType>; +export type EuiDataGridCellValueElementPropsWithContext< + T extends Record +> = EuiDataGridCellValueElementProps & ReturnType>; export type renderCellValue = | ((props: EuiDataGridCellValueElementProps) => ReactNode) | ComponentClass; export type renderCellValueWithContext = - | ((props: EuiDataGridCellValueElementPropsWithContext) => ReactNode) - | ComponentClass; + | (( + props: EuiDataGridCellValueElementPropsWithContext> + ) => ReactNode) + | ComponentClass< + EuiDataGridCellValueElementPropsWithContext> + >; export interface EuiDataGridCellProps { rowIndex: number; @@ -621,7 +626,7 @@ export interface EuiDataGridCellProps { className?: string; popoverContext: DataGridCellPopoverContextShape; renderCellValue: renderCellValue | renderCellValueWithContext; - renderCellContext?: RenderCellContext; + renderCellContext?: RenderCellContext>; renderCellPopover?: | JSXElementConstructor | ((props: EuiDataGridCellPopoverElementProps) => ReactNode);