diff --git a/packages/react/src/components/DataTable/DataTable.tsx b/packages/react/src/components/DataTable/DataTable.tsx index b4d40a0e8291..3dfc147e759a 100644 --- a/packages/react/src/components/DataTable/DataTable.tsx +++ b/packages/react/src/components/DataTable/DataTable.tsx @@ -75,9 +75,9 @@ const dataTableDefaultProps = { export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; -export interface DataTableCell { +export interface DataTableCell { id: string; - value: unknown; + value: T; isEditable: boolean; isEditing: boolean; isValid: boolean; @@ -87,9 +87,11 @@ export interface DataTableCell { }; } -export interface DataTableRow { +type DataTableCells = { [K in keyof T]: DataTableCell }; + +export interface DataTableRow { id: string; - cells: Array; + cells: DataTableCells; disabled?: boolean; isExpanded?: boolean; isSelected?: boolean; @@ -100,10 +102,10 @@ export interface DataTableHeader { header: React.ReactNode; } -export interface DataTableRenderProps { +export interface DataTableRenderProps { headers: Array; - rows: Array; - selectedRows: Array; + rows: Array & RowType>; + selectedRows: Array & RowType>; // Prop accessors/getters getHeaderProps: (getHeaderPropsArgs: { @@ -134,7 +136,7 @@ export interface DataTableRenderProps { }; getRowProps: (getRowPropsArgs: { onClick?: (e: MouseEvent) => void; - row: DataTableRow; + row: DataTableRow; [key: string]: unknown; }) => { ariaLabel: string; @@ -147,7 +149,7 @@ export interface DataTableRenderProps { }; getSelectionProps: (getSelectionPropsArgs: { onClick?: (e: MouseEvent) => void; - row: DataTableRow; + row: DataTableRow; [key: string]: unknown; }) => { ariaLabel: string; @@ -198,11 +200,13 @@ export interface DataTableRenderProps { radio: boolean | undefined; } -export interface DataTableProps { - children?: (renderProps: DataTableRenderProps) => React.ReactElement; +export interface DataTableProps { + children?: ( + renderProps: DataTableRenderProps + ) => React.ReactElement; experimentalAutoAlign?: boolean; filterRows?: (filterRowsArgs: { - cellsById: Record; + cellsById: Record>; getCellId: (rowId: string, header: string) => string; headers: Array; inputValue: string; @@ -213,12 +217,14 @@ export interface DataTableProps { locale?: string; overflowMenuOnHover?: boolean; radio?: boolean; - render?: (renderProps: DataTableRenderProps) => React.ReactElement; - rows: Array>; + render?: ( + renderProps: DataTableRenderProps + ) => React.ReactElement; + rows: Array, 'cells'>>; size?: DataTableSize; sortRow?: ( - cellA: DataTableCell, - cellB: DataTableCell, + cellA: DataTableCell, + cellB: DataTableCell, sortRowOptions: { sortDirection: DataTableSortState; sortStates: Record; @@ -231,13 +237,13 @@ export interface DataTableProps { useZebraStyles?: boolean; } -interface DataTableState { - cellsById: Record; +interface DataTableState { + cellsById: Record>; filterInputValue: string | null; initialRowOrder: Array; isExpandedAll: boolean; rowIds: Array; - rowsById: Record; + rowsById: Record>; shouldShowBatchActions: boolean; sortDirection: DataTableSortState; sortHeaderKey: string | null; @@ -253,9 +259,9 @@ interface DataTableState { * and updating the state of the single entity will cascade updates to the * consumer. */ -class DataTable extends React.Component< - DataTableProps & typeof dataTableDefaultProps, - DataTableState +class DataTable extends React.Component< + DataTableProps & typeof dataTableDefaultProps, + DataTableState > { instanceId: number; @@ -535,7 +541,7 @@ class DataTable extends React.Component< ...rest }: { onClick?: (e: MouseEvent) => void; - row: DataTableRow; + row: DataTableRow; [key: string]: unknown; }) => { const { translateWithId: t } = this.props; @@ -568,7 +574,7 @@ class DataTable extends React.Component< getSelectionProps = ( { onClick, row, ...rest } = {} as { onClick?: (e: MouseEvent) => void; - row: DataTableRow; + row: DataTableRow; [key: string]: unknown; } ) => { @@ -907,7 +913,7 @@ class DataTable extends React.Component< getCellId, }) : rowIds; - const renderProps: DataTableRenderProps = { + const renderProps: DataTableRenderProps = { // Data derived from state rows: denormalize(filteredRowIds, rowsById, cellsById), headers: this.props.headers,