LG-3697: Expose value type for useLeafyGreenTable (#2127)

* expose value type for useLeafyGreenTable

* changeset

* Remove unused code

* change header value

Author: spark33

.changeset/real-tomatoes-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/table': minor
+---
+
+Table now exposes an optional second generic type for useLeafyGreenTable that controls the type of the value

packages/table/src/useLeafyGreenTable/TableHeaderCheckbox.tsx

@@ -10,10 +10,10 @@ import { useRowContext } from '../Row/RowContext';
 import { disabledTableRowCheckStyles } from './useLeafyGreenTable.styles';
 import { LGRowData, LGTableDataType } from '.';
 
-export const TableHeaderCheckbox = ({
+export const TableHeaderCheckbox = <T extends LGRowData>({
   table,
 }: {
-  table: Table<LGTableDataType<LGRowData>>;
+  table: Table<LGTableDataType<T>>;
 }) => {
   const { theme } = useDarkMode();
   const { disabled: rowIsDisabled } = useRowContext();

packages/table/src/useLeafyGreenTable/TableRowCheckbox.tsx

@@ -10,12 +10,12 @@ import { useRowContext } from '../Row/RowContext';
 import { disabledTableRowCheckStyles } from './useLeafyGreenTable.styles';
 import { LGRowData, LGTableDataType } from '.';
 
-export const TableRowCheckbox = ({
+export const TableRowCheckbox = <T extends LGRowData>({
   row,
   table,
 }: {
-  table: Table<LGTableDataType<LGRowData>>;
-  row: Row<LGTableDataType<LGRowData>>;
+  table: Table<LGTableDataType<T>>;
+  row: Row<LGTableDataType<T>>;
 }) => {
   const { theme } = useDarkMode();
   const { disabled: rowIsDisabled } = useRowContext();

packages/table/src/useLeafyGreenTable/useLeafyGreenTable.tsx

@@ -15,17 +15,7 @@ import { LeafyGreenTable, LGColumnDef, LGTableDataType } from '.';
 
 const CHECKBOX_WIDTH = 14;
 
-/**
- * A `ColumnDef` object injected into `useReactTable`'s `columns` option when the user is using selectable rows.
- */
-const baseSelectColumnConfig: LGColumnDef<LGRowData> = {
-  id: 'select',
-  size: CHECKBOX_WIDTH,
-  header: TableHeaderCheckbox,
-  cell: TableRowCheckbox,
-};
-
-function useLeafyGreenTable<T extends LGRowData>({
+function useLeafyGreenTable<T extends LGRowData, V extends unknown = unknown>({
   containerRef,
   data,
   columns: columnsProp,
@@ -34,23 +24,33 @@ function useLeafyGreenTable<T extends LGRowData>({
   useVirtualScrolling = false,
   allowSelectAll = true,
   ...rest
-}: LeafyGreenTableOptions<T>): LeafyGreenTable<T> {
+}: LeafyGreenTableOptions<T, V>): LeafyGreenTable<T> {
+  /**
+   * A `ColumnDef` object injected into `useReactTable`'s `columns` option when the user is using selectable rows.
+   */
+  const baseSelectColumnConfig: LGColumnDef<T, V> = {
+    id: 'select',
+    size: CHECKBOX_WIDTH,
+    header: TableHeaderCheckbox,
+    cell: TableRowCheckbox,
+  };
+
   const hasSortableColumns = React.useMemo(
     () => columnsProp.some(propCol => !!propCol.enableSorting),
     [columnsProp],
   );
   const selectColumnConfig = allowSelectAll
     ? baseSelectColumnConfig
     : omit(baseSelectColumnConfig, 'header');
-  const columns = React.useMemo<Array<LGColumnDef<T>>>(
+  const columns = React.useMemo<Array<LGColumnDef<T, V>>>(
     () => [
-      ...(hasSelectableRows ? [selectColumnConfig as LGColumnDef<T>] : []),
+      ...(hasSelectableRows ? [selectColumnConfig as LGColumnDef<T, V>] : []),
       ...columnsProp.map(propColumn => {
         return {
           ...propColumn,
           align: propColumn.align ?? 'left',
           enableSorting: propColumn.enableSorting ?? false,
-        } as LGColumnDef<T>;
+        } as LGColumnDef<T, V>;
       }),
     ],
     [columnsProp, hasSelectableRows, selectColumnConfig],

packages/table/src/useLeafyGreenTable/useLeafyGreenTable.types.ts

@@ -31,17 +31,22 @@ export type LeafyGreenTableCell<T extends LGRowData> = Cell<
 export interface LeafyGreenTableRow<T extends LGRowData>
   extends Row<LGTableDataType<T>> {}
 
-export type LGColumnDef<T extends LGRowData> = ColumnDef<LGTableDataType<T>> & {
+export type LGColumnDef<
+  T extends LGRowData,
+  V extends unknown = unknown,
+> = ColumnDef<LGTableDataType<T>, V> & {
   align?: HTMLElementProps<'td'>['align'];
 };
 
 /** LeafyGreen extension of `useReactTable` {@link TableOptions}*/
-export interface LeafyGreenTableOptions<T extends LGRowData>
-  extends Omit<TableOptions<LGTableDataType<T>>, 'getCoreRowModel'> {
+export interface LeafyGreenTableOptions<
+  T extends LGRowData,
+  V extends unknown = unknown,
+> extends Omit<TableOptions<LGTableDataType<T>>, 'getCoreRowModel'> {
   containerRef: RefObject<HTMLDivElement>;
   hasSelectableRows?: boolean;
   useVirtualScrolling?: boolean;
-  columns: Array<LGColumnDef<T>>;
+  columns: Array<LGColumnDef<T, V>>;
   withPagination?: boolean;
   allowSelectAll?: boolean;
 }