From 04e9bc9a14fa37240fdfcd7c2baed2801946b35b Mon Sep 17 00:00:00 2001
From: MillanWangGadget <millan@gadget.dev>
Date: Sun, 22 Sep 2024 18:18:05 -0400
Subject: [PATCH] Added custom style support to custom column controls in
 AutoTable

---
 packages/react/.changeset/swift-birds-tap.md  | 24 +++++++++++++++++++
 .../spec/auto/PolarisAutoTable.stories.jsx    |  1 +
 .../src/auto/polaris/PolarisAutoTable.tsx     | 21 ++++++++++++++--
 packages/react/src/use-table/helpers.tsx      |  4 +++-
 packages/react/src/use-table/types.ts         |  4 ++++
 5 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 packages/react/.changeset/swift-birds-tap.md

diff --git a/packages/react/.changeset/swift-birds-tap.md b/packages/react/.changeset/swift-birds-tap.md
new file mode 100644
index 000000000..12f6a272f
--- /dev/null
+++ 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
index d0602de3e..e0821a91d 100644
--- a/packages/react/spec/auto/PolarisAutoTable.stories.jsx
+++ b/packages/react/spec/auto/PolarisAutoTable.stories.jsx
@@ -213,6 +213,7 @@ export const CustomCell = {
       },
       "rt",
       {
+        style: { backgroundColor: "red", overflow: "hidden" },
         header: "Custom cell",
         render: ({ record }) => {
           return (
diff --git a/packages/react/src/auto/polaris/PolarisAutoTable.tsx b/packages/react/src/auto/polaris/PolarisAutoTable.tsx
index 349a4fe44..d8c470cab 100644
--- 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,25 @@ const PolarisAutoTableComponent = <
             })}
         </IndexTable>
       </BlockStack>
+      <PolarisIndexTableCellStyleOverride />
     </AutoTableContext.Provider>
   );
 };
 
+const defaultCellStyle: React.CSSProperties = {
+  maxWidth: "200px",
+  padding: "0.375rem",
+} as const;
+
+const PolarisIndexTableCellStyleOverride = () => {
+  const css = /*css*/ `
+  .Gadget_PolarisAutoTable_IndexTableCell {
+    padding: 0px !important; /*!important to override the default padding from a class that gets applied afterwards*/
+  }
+`;
+  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
index 22291cd3f..53370c686 100644
--- 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
index 0d985a635..25afe20b6 100644
--- 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 & {