Added custom style support to custom column controls in AutoTable

gadget-inc · Sep 22, 2024 · ea71cd1 · ea71cd1
1 parent 2850612
commit ea71cd1
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 4 deletions.
diff --git a/packages/react/.changeset/swift-birds-tap.md b/packages/react/.changeset/swift-birds-tap.md
@@ -0,0 +1,24 @@
+---
+"@gadgetinc/react": patch
+---
+
+Added custom style support to custom column controls in AutoTable
+
+```jsx
+const MyAutoTable = () => {
+  const columns = [
+    {
+      header: "Custom header",
+      field: "fieldApiIdentifier",
+      style: { backgroundColor: "red" },
+    },
+    {
+      header: "Custom cell renderer",
+      render: ({ record }) => <div>{record.name}</div>,
+      style: { backgroundColor: "blue" },
+    },
+  ];
+
+  return <AutoTable model={api.myModel} columns={columns} />;
+};
+```
diff --git a/packages/react/spec/auto/PolarisAutoTable.stories.jsx b/packages/react/spec/auto/PolarisAutoTable.stories.jsx
@@ -213,7 +213,8 @@ export const CustomCell = {
       },
       "rt",
       {
-        header: "Custom cell",
+        style: { backgroundColor: "#abcdef", width: "320px", maxWidth: "320px" },
+        header: "Custom cell with custom style",
         render: ({ record }) => {
           return (
             <div>

diff --git a/packages/react/spec/auto/hooks/helpers.spec.ts b/packages/react/spec/auto/hooks/helpers.spec.ts
@@ -346,13 +346,15 @@ describe("helper functions for useTable hook", () => {
             "header": "Name",
             "identifier": "name",
             "sortable": true,
+            "style": undefined,
             "type": "String",
           },
           {
             "field": "age",
             "header": "Age",
             "identifier": "age",
             "sortable": true,
+            "style": undefined,
             "type": "Number",
           },
         ]
@@ -385,13 +387,15 @@ describe("helper functions for useTable hook", () => {
             "header": "Some cool name",
             "identifier": "name",
             "sortable": true,
+            "style": undefined,
             "type": "String",
           },
           {
             "field": "age",
             "header": "Age",
             "identifier": "age",
             "sortable": false,
+            "style": undefined,
             "type": "Number",
           },
         ]
@@ -412,6 +416,7 @@ describe("helper functions for useTable hook", () => {
               "header": "Address",
               "identifier": "address",
               "sortable": true,
+              "style": undefined,
               "type": "String",
             },
             {
@@ -420,6 +425,7 @@ describe("helper functions for useTable hook", () => {
               "identifier": "owner",
               "relationshipType": "HasOne",
               "sortable": true,
+              "style": undefined,
               "type": "String",
             },
             {
@@ -428,6 +434,7 @@ describe("helper functions for useTable hook", () => {
               "identifier": "products",
               "relationshipType": "HasMany",
               "sortable": true,
+              "style": undefined,
               "type": "String",
             },
             {
@@ -436,6 +443,7 @@ describe("helper functions for useTable hook", () => {
               "identifier": "manufacturer",
               "relationshipType": "BelongsTo",
               "sortable": true,
+              "style": undefined,
               "type": "String",
             },
           ]
@@ -455,6 +463,7 @@ describe("helper functions for useTable hook", () => {
               "header": "Address",
               "identifier": "address",
               "sortable": true,
+              "style": undefined,
               "type": "String",
             },
             {
@@ -463,6 +472,7 @@ describe("helper functions for useTable hook", () => {
               "identifier": "owner.name",
               "relationshipType": "HasOne",
               "sortable": true,
+              "style": undefined,
               "type": "String",
             },
             {
@@ -471,6 +481,7 @@ describe("helper functions for useTable hook", () => {
               "identifier": "products.edges.node.sku",
               "relationshipType": "HasMany",
               "sortable": true,
+              "style": undefined,
               "type": "String",
             },
             {
@@ -479,6 +490,7 @@ describe("helper functions for useTable hook", () => {
               "identifier": "manufacturer.country",
               "relationshipType": "BelongsTo",
               "sortable": true,
+              "style": undefined,
               "type": "String",
             },
           ]

diff --git a/packages/react/spec/auto/hooks/useTable.spec.tsx b/packages/react/spec/auto/hooks/useTable.spec.tsx
@@ -126,41 +126,47 @@ describe("useTable hook", () => {
           "header": "Id",
           "identifier": "id",
           "sortable": false,
+          "style": undefined,
           "type": "ID",
         },
         {
           "field": "name",
           "header": "Name",
           "identifier": "name",
           "sortable": true,
+          "style": undefined,
           "type": "String",
         },
         {
           "field": "inventoryCount",
           "header": "Inventory count",
           "identifier": "inventoryCount",
           "sortable": true,
+          "style": undefined,
           "type": "Number",
         },
         {
           "field": "anything",
           "header": "Anything",
           "identifier": "anything",
           "sortable": true,
+          "style": undefined,
           "type": "JSON",
         },
         {
           "field": "description",
           "header": "Description",
           "identifier": "description",
           "sortable": true,
+          "style": undefined,
           "type": "RichText",
         },
         {
           "field": "category",
           "header": "Category",
           "identifier": "category",
           "sortable": true,
+          "style": undefined,
           "type": "Enum",
         },
         {
@@ -169,27 +175,31 @@ describe("useTable hook", () => {
           "identifier": "startsAt",
           "includeTime": undefined,
           "sortable": true,
+          "style": undefined,
           "type": "DateTime",
         },
         {
           "field": "isChecked",
           "header": "Is checked",
           "identifier": "isChecked",
           "sortable": true,
+          "style": undefined,
           "type": "Boolean",
         },
         {
           "field": "metafields",
           "header": "Metafields",
           "identifier": "metafields",
           "sortable": true,
+          "style": undefined,
           "type": "JSON",
         },
         {
           "field": "roles",
           "header": "Roles",
           "identifier": "roles",
           "sortable": false,
+          "style": undefined,
           "type": "RoleAssignments",
         },
         {
@@ -198,27 +208,31 @@ describe("useTable hook", () => {
           "identifier": "birthday",
           "includeTime": undefined,
           "sortable": true,
+          "style": undefined,
           "type": "DateTime",
         },
         {
           "field": "color",
           "header": "Color",
           "identifier": "color",
           "sortable": true,
+          "style": undefined,
           "type": "Color",
         },
         {
           "field": "secretKey",
           "header": "Secret key",
           "identifier": "secretKey",
           "sortable": false,
+          "style": undefined,
           "type": "EncryptedString",
         },
         {
           "field": "mustBeLongString",
           "header": "Must be long string",
           "identifier": "mustBeLongString",
           "sortable": true,
+          "style": undefined,
           "type": "String",
         },
       ]
@@ -526,6 +540,7 @@ describe("useTable hook", () => {
             "header": "Name",
             "identifier": "name",
             "sortable": true,
+            "style": undefined,
             "type": "String",
           },
           {
@@ -534,6 +549,7 @@ describe("useTable hook", () => {
             "identifier": "000-000-000-000-1",
             "render": [Function],
             "sortable": false,
+            "style": undefined,
             "type": "CustomRenderer",
           },
         ]

diff --git a/packages/react/src/auto/polaris/PolarisAutoTable.tsx b/packages/react/src/auto/polaris/PolarisAutoTable.tsx
@@ -223,6 +223,8 @@ const PolarisAutoTableComponent = <
           hasZebraStriping={props.hasZebraStriping}
           condensed={props.condensed}
         >
+          <PolarisIndexTableCellStyleOverride />
+
           {rows &&
             columns &&
             rows.map((row, index) => {
@@ -236,8 +238,8 @@ const PolarisAutoTableComponent = <
                   selected={selection.recordIds.includes(row.id as string)}
                 >
                   {columns.map((column) => (
-                    <IndexTable.Cell key={column.identifier}>
-                      <div style={{ maxWidth: "200px" }}>
+                    <IndexTable.Cell key={column.identifier} className="Gadget_PolarisAutoTable_IndexTableCell">
+                      <div style={{ ...defaultCellStyle, ...column.style }}>
                         {column.type == "CustomRenderer" ? (
                           (row[column.identifier] as ReactNode)
                         ) : (
@@ -251,10 +253,29 @@ const PolarisAutoTableComponent = <
             })}
         </IndexTable>
       </BlockStack>
+      <PolarisIndexTableCellStyleOverride />
     </AutoTableContext.Provider>
   );
 };
 
+const defaultCellStyle: React.CSSProperties = {
+  maxWidth: "200px",
+  padding: "0.375rem",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+} as const;
+
+const PolarisIndexTableCellStyleOverride = () => {
+  // !important to override the default padding from a class that gets applied afterwards
+  const css = /*css*/ `
+  .Gadget_PolarisAutoTable_IndexTableCell {
+    padding: 0px !important; 
+  }
+`;
+  return <style>{css}</style>;
+};
+
 const disablePaginatedSelectAllButton = {
   paginatedSelectAllActionText: "", // Empty string to hide the select all button. We only allow selection on the current page
 };

diff --git a/packages/react/src/use-table/helpers.tsx b/packages/react/src/use-table/helpers.tsx
@@ -159,12 +159,13 @@ export const getTableColumns = (spec: Pick<TableSpec, "fieldMetadataTree" | "tar
         field: targetColumn.header,
         type: "CustomRenderer",
         sortable: false,
+        style: targetColumn.style,
       });
 
       continue;
     }
 
-    const { header, field: columnPath, sortable } = getCellDetailColumnByColumnValue(targetColumn);
+    const { header, field: columnPath, sortable, style } = getCellDetailColumnByColumnValue(targetColumn);
     const { firstField, targetField, isHasMany, isHasOneOrBelongsTo } = getFieldInformationByColumnPath(spec.fieldMetadataTree, columnPath);
 
     const column: TableColumn = {
@@ -173,6 +174,7 @@ export const getTableColumns = (spec: Pick<TableSpec, "fieldMetadataTree" | "tar
       field: columnPath,
       type: targetField.fieldType,
       sortable: isColumnSortable(targetField, sortable),
+      style,
     };
 
     // The column path doesn't specify a related field, so we need to get the default display field

diff --git a/packages/react/src/use-table/types.ts b/packages/react/src/use-table/types.ts
@@ -36,6 +36,8 @@ export type TableColumn = {
   includeTime?: boolean;
   /** Custom render function */
   render?: CustomCellRenderer;
+  /** Custom style for the cells in the column */
+  style?: React.CSSProperties;
 };
 
 export type TableRow = Record<string, ColumnValueType | ReactNode>;
@@ -101,6 +103,7 @@ export type RelatedFieldColumn = {
 export type CustomCellColumn = {
   header: string;
   render: CustomCellRenderer;
+  style?: React.CSSProperties;
 };
 
 export type CustomCellRenderer = (props: { record: GadgetRecord<any>; index: number }) => ReactNode;
@@ -109,6 +112,7 @@ export type CellDetailColumn = {
   header?: string;
   field: string;
   sortable?: boolean;
+  style?: React.CSSProperties;
 };
 
 export type FieldMetadataFragmentWithRelationshipConfig = FieldMetadataFragment & {