Updated AutoTable to allow custom column header components

Author: MillanWangGadget

packages/react/.changeset/gorgeous-falcons-grow.md

@@ -0,0 +1,5 @@
+---
+"@gadgetinc/react": patch
+---
+
+Updated AutoTable to allow custom column header components

packages/react/spec/auto/hooks/useTable.spec.tsx

@@ -313,7 +313,10 @@ describe("useTable hook", () => {
           }
         }"
       `);
-      expect(result.current[0].columns?.map((column) => column.field)).toEqual(["name", "inventoryCount"]);
+      expect(result.current[0].columns?.map((column) => (column.type === "CustomRenderer" ? undefined : column.field))).toEqual([
+        "name",
+        "inventoryCount",
+      ]);
       expect(result.current[0].rows).toMatchInlineSnapshot(`
               [
                 {
@@ -380,7 +383,7 @@ describe("useTable hook", () => {
           }
         }"
       `);
-      expect(result.current[0].columns?.map((column) => column.field)).toEqual([
+      expect(result.current[0].columns?.map((column) => (column.type === "CustomRenderer" ? undefined : column.field))).toEqual([
         "name",
         "hasMany",
         "hasOne",
@@ -463,7 +466,7 @@ describe("useTable hook", () => {
           }
         }"
       `);
-      expect(result.current[0].columns?.map((column) => column.field)).toEqual([
+      expect(result.current[0].columns?.map((column) => (column.type === "CustomRenderer" ? undefined : column.field))).toEqual([
         "name",
         "hasMany.edges.node.name",
         "hasOne.name",
@@ -574,7 +577,6 @@ describe("useTable hook", () => {
             "type": "String",
           },
           {
-            "field": "Custom column",
             "header": "Custom column",
             "identifier": "000-000-000-000-1",
             "render": [Function],
@@ -654,7 +656,7 @@ describe("useTable hook", () => {
       `);
 
       // The list should not contain "name" and "inventoryCount" because they are excluded
-      expect(result.current[0].columns?.map((column) => column.field)).toEqual([
+      expect(result.current[0].columns?.map((column) => (column.type === "CustomRenderer" ? undefined : column.field))).toEqual([
         "id",
         "anything",
         "description",

packages/react/spec/auto/polaris/table/PolarisAutoTable.spec.tsx

@@ -287,7 +287,7 @@ describe("PolarisAutoTable", () => {
         {
           identifier: sampleUUID1,
           header: "Custom cell",
-          field: "Custom cell",
+          render: () => "Custom cell",
           type: "CustomRenderer",
           sortable: false,
         },
@@ -351,14 +351,14 @@ describe("PolarisAutoTable", () => {
         {
           identifier: sampleUUID1,
           header: "Custom cell",
-          field: "Custom cell",
+          render: () => "Custom cell",
           type: "CustomRenderer",
           sortable: false,
         },
         {
           identifier: sampleUUID2,
           header: "Custom cell",
-          field: "Custom cell",
+          render: () => "Custom cell",
           type: "CustomRenderer",
           sortable: false,
         },

packages/react/spec/auto/storybook/table/AutoTable.stories.tsx

@@ -169,17 +169,31 @@ const CustomCheckboxCell = ({ record }: { record: any }) => {
   );
 };
 
+const ColorChangingText = (props: { text: string }) => {
+  const [color, setColor] = React.useState("#000000");
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
+      setColor(randomColor);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+  return <div style={{ color }}>{props.text}</div>;
+};
+
 export const CustomCellWithUseAction: any = {
   args: {
     model: api.autoTableTest,
     columns: [
       "bool",
       {
-        header: "Pass the whole function",
+        header: <ColorChangingText text="Pass the whole function" />,
         render: CustomCheckboxCell,
       },
       {
-        header: "JSX style",
+        header: <ColorChangingText text="JSX style" />,
         render: (props: any) => <CustomCheckboxCell {...props} />,
       },
     ],

packages/react/src/auto/polaris/PolarisAutoTable.tsx

@@ -49,8 +49,8 @@ const gadgetToPolarisDirection = (direction?: SortOrder) => {
   return undefined;
 };
 
-const getColumnIndex = (columns: TableColumn[], apiIdentifier: string | undefined) => {
-  return columns.findIndex((column) => column.field === apiIdentifier);
+const maybeGetColumnIndex = (columns: TableColumn[], apiIdentifier: string | undefined) => {
+  return columns.findIndex((column) => (column.type === "CustomRenderer" ? undefined : column.field === apiIdentifier));
 };
 
 export type PolarisAutoTableProps<
@@ -127,8 +127,11 @@ const PolarisAutoTableComponent = <
 
   const handleColumnSort = (headingIndex: number) => {
     if (columns) {
-      const columnApiIdentifier = columns[headingIndex].field;
-      sort.handleColumnSort(columnApiIdentifier);
+      const currentColumn = columns[headingIndex];
+      const columnApiIdentifier = currentColumn.type === "CustomRenderer" ? undefined : currentColumn.field;
+      if (columnApiIdentifier) {
+        sort.handleColumnSort(columnApiIdentifier);
+      }
     }
   };
 
@@ -147,7 +150,9 @@ const PolarisAutoTableComponent = <
 
     if (columns) {
       for (const column of columns) {
-        headings.push({ title: column.header });
+        headings.push({
+          title: column.header as string, // Polaris type says that this must be a string, but this works with a ReactNode
+        });
         sortable.push(column.sortable);
       }
     }
@@ -247,7 +252,7 @@ const PolarisAutoTableComponent = <
               : undefined
           }
           sortDirection={gadgetToPolarisDirection(sort.direction)}
-          sortColumnIndex={columns ? getColumnIndex(columns, sort.column) : undefined}
+          sortColumnIndex={columns ? maybeGetColumnIndex(columns, sort.column) : undefined}
           onSort={(headingIndex) => handleColumnSort(headingIndex)}
           selectable={props.selectable === undefined ? bulkActionOptions.length !== 0 : props.selectable}
           lastColumnSticky={props.lastColumnSticky}

packages/react/src/auto/shadcn/ShadcnAutoTable.tsx

@@ -139,7 +139,7 @@ export const makeAutoTable = (elements: ShadcnElements) => {
                 variant="ghost"
                 size="sm"
                 className="cursor-pointer"
-                onClick={() => sort.handleColumnSort(column.field)}
+                onClick={() => (column.type === "CustomRenderer" ? undefined : sort.handleColumnSort(column.field))}
                 {...hoverProps}
               >
                 {ColumnHeaderLabel}

packages/react/src/auto/shadcn/table/ShadcnAutoTableColumnSortIndicator.tsx

@@ -12,10 +12,13 @@ export const makeShadcnAutoTableColumnSortIndicator = (elements: ShadcnElements)
   function ShadcnAutoTableColumnSortIndicator(props: { column: TableColumn; sortState: SortState; isHovered: boolean }) {
     const { column, sortState, isHovered } = props;
     const handleSort = useCallback(() => {
+      if (column.type === "CustomRenderer") {
+        return;
+      }
       sortState.handleColumnSort(column.field);
-    }, [sortState, column.field]);
+    }, [sortState, column.type, column.type === "CustomRenderer" ? undefined : column.field]);
 
-    if (!column.sortable) {
+    if (!column.sortable || column.type === "CustomRenderer") {
       return null;
     }
 

packages/react/src/use-table/helpers.tsx

@@ -156,7 +156,6 @@ export const getTableColumns = (spec: Pick<TableSpec, "fieldMetadataTree" | "tar
         identifier,
         render: targetColumn.render,
         header: targetColumn.header,
-        field: targetColumn.header,
         type: "CustomRenderer",
         sortable: false,
         style: targetColumn.style,

packages/react/src/use-table/types.ts

@@ -29,20 +29,26 @@ export type TableColumn = {
   /** Identifier for the column */
   identifier: string;
   /** Human-readable header value for the column */
-  header: string;
-  /** Dot-separated path to the field in the record */
-  field: string;
-  type: ColumnType;
+  header: ReactNode;
   /** parent relationship type if the parent field is a relationship */
   relationshipType?: RelationshipType;
   sortable: boolean;
   /** For controlling if the time is shown on DateTime cell renderers   */
   includeTime?: boolean;
-  /** Custom render function */
-  render?: CustomCellRenderer;
   /** Custom style for the cells in the column */
   style?: React.CSSProperties;
-};
+} & (
+  | {
+      type: GadgetFieldType;
+      /** Dot-separated path to the field in the record */
+      field: string;
+    }
+  | {
+      type: "CustomRenderer";
+      /** Custom render function */
+      render: CustomCellRenderer;
+    }
+);
 
 export type TableRow = Record<string, ColumnValueType | ReactNode>;
 
@@ -149,15 +155,15 @@ export type RelatedFieldColumn = {
 };
 
 export type CustomCellColumn = {
-  header: string;
+  header: ReactNode;
   render: CustomCellRenderer;
   style?: React.CSSProperties;
 };
 
 export type CustomCellRenderer = (props: { record: GadgetRecord<any>; index: number }) => ReactNode;
 
 export type CellDetailColumn = {
-  header?: string;
+  header?: ReactNode;
   field: string;
   sortable?: boolean;
   style?: React.CSSProperties;