fix(DataTable): add Row and Column types (#14285)

Co-authored-by: Andrea N. Cardona <[email protected]>
carbon-design-system · Jul 25, 2023 · 3340287 · 3340287
1 parent 5e4d244
commit 3340287
Showing 1 changed file with 31 additions and 25 deletions.
diff --git 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<T> {
   id: string;
-  value: unknown;
+  value: T;
   isEditable: boolean;
   isEditing: boolean;
   isValid: boolean;
@@ -87,9 +87,11 @@ export interface DataTableCell {
   };
 }
 
-export interface DataTableRow {
+type DataTableCells<T extends any[]> = { [K in keyof T]: DataTableCell<T[K]> };
+
+export interface DataTableRow<ColTypes extends any[]> {
   id: string;
-  cells: Array<DataTableCell>;
+  cells: DataTableCells<ColTypes>;
   disabled?: boolean;
   isExpanded?: boolean;
   isSelected?: boolean;
@@ -100,10 +102,10 @@ export interface DataTableHeader {
   header: React.ReactNode;
 }
 
-export interface DataTableRenderProps {
+export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
   headers: Array<DataTableHeader>;
-  rows: Array<DataTableRow>;
-  selectedRows: Array<DataTableRow>;
+  rows: Array<DataTableRow<ColTypes> & RowType>;
+  selectedRows: Array<DataTableRow<ColTypes> & RowType>;
 
   // Prop accessors/getters
   getHeaderProps: (getHeaderPropsArgs: {
@@ -134,7 +136,7 @@ export interface DataTableRenderProps {
   };
   getRowProps: (getRowPropsArgs: {
     onClick?: (e: MouseEvent) => void;
-    row: DataTableRow;
+    row: DataTableRow<ColTypes>;
     [key: string]: unknown;
   }) => {
     ariaLabel: string;
@@ -147,7 +149,7 @@ export interface DataTableRenderProps {
   };
   getSelectionProps: (getSelectionPropsArgs: {
     onClick?: (e: MouseEvent) => void;
-    row: DataTableRow;
+    row: DataTableRow<ColTypes>;
     [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<RowType, ColTypes extends any[]> {
+  children?: (
+    renderProps: DataTableRenderProps<RowType, ColTypes>
+  ) => React.ReactElement;
   experimentalAutoAlign?: boolean;
   filterRows?: (filterRowsArgs: {
-    cellsById: Record<string, DataTableCell>;
+    cellsById: Record<string, DataTableCell<RowType>>;
     getCellId: (rowId: string, header: string) => string;
     headers: Array<DataTableHeader>;
     inputValue: string;
@@ -213,12 +217,14 @@ export interface DataTableProps {
   locale?: string;
   overflowMenuOnHover?: boolean;
   radio?: boolean;
-  render?: (renderProps: DataTableRenderProps) => React.ReactElement;
-  rows: Array<Omit<DataTableRow, 'cells'>>;
+  render?: (
+    renderProps: DataTableRenderProps<RowType, ColTypes>
+  ) => React.ReactElement;
+  rows: Array<Omit<DataTableRow<ColTypes>, 'cells'>>;
   size?: DataTableSize;
   sortRow?: (
-    cellA: DataTableCell,
-    cellB: DataTableCell,
+    cellA: DataTableCell<any>,
+    cellB: DataTableCell<any>,
     sortRowOptions: {
       sortDirection: DataTableSortState;
       sortStates: Record<DataTableSortState, DataTableSortState>;
@@ -231,13 +237,13 @@ export interface DataTableProps {
   useZebraStyles?: boolean;
 }
 
-interface DataTableState {
-  cellsById: Record<string, DataTableCell>;
+interface DataTableState<ColTypes extends any[]> {
+  cellsById: Record<string, DataTableCell<ColTypes>>;
   filterInputValue: string | null;
   initialRowOrder: Array<string>;
   isExpandedAll: boolean;
   rowIds: Array<string>;
-  rowsById: Record<string, DataTableRow>;
+  rowsById: Record<string, DataTableRow<ColTypes>>;
   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<RowType, ColTypes extends any[]> extends React.Component<
+  DataTableProps<RowType, ColTypes> & typeof dataTableDefaultProps,
+  DataTableState<ColTypes>
 > {
   instanceId: number;
 
@@ -535,7 +541,7 @@ class DataTable extends React.Component<
     ...rest
   }: {
     onClick?: (e: MouseEvent) => void;
-    row: DataTableRow;
+    row: DataTableRow<ColTypes>;
     [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<ColTypes>;
       [key: string]: unknown;
     }
   ) => {
@@ -907,7 +913,7 @@ class DataTable extends React.Component<
             getCellId,
           })
         : rowIds;
-    const renderProps: DataTableRenderProps = {
+    const renderProps: DataTableRenderProps<RowType, ColTypes> = {
       // Data derived from state
       rows: denormalize(filteredRowIds, rowsById, cellsById),
       headers: this.props.headers,