Added custom style support to custom column controls in AutoTable

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

Hide file tree

Showing 5 changed files with 55 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/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,28 @@ 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 = () => {
+  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
@@ -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 & {