diff --git a/packages/react/spec/auto/hooks/useTable.spec.tsx b/packages/react/spec/auto/hooks/useTable.spec.tsx index b7f71037b..8ef20e41d 100644 --- a/packages/react/spec/auto/hooks/useTable.spec.tsx +++ b/packages/react/spec/auto/hooks/useTable.spec.tsx @@ -577,6 +577,7 @@ describe("useTable hook", () => { "type": "String", }, { + "field": undefined, "header": "Custom column", "identifier": "000-000-000-000-1", "render": [Function], @@ -849,6 +850,100 @@ describe("useTable hook", () => { const customColumn2Result = render(<>{result.current[0].rows?.[0]?.[columnKeys[2]]}); expect(customColumn2Result.container.textContent).toBe("some different stuff"); }); + + it("should not be sortable when no field is provided", async () => { + const result = getUseTableResult({ + columns: [ + "name", + { + header: "Custom column", + render: ({ record }) =>
Custom: {record.name}
, + }, + ], + }); + await loadMockWidgetModelMetadata(); + await loadWidgetData(); + + const customColumn = result.current[0].columns?.find((col) => col.type === "CustomRenderer"); + expect(customColumn?.sortable).toBe(false); + expect(customColumn?.field).toBeUndefined(); + }); + + it("should be sortable when a sortable field is provided", async () => { + const result = getUseTableResult({ + columns: [ + { + header: "Custom Name", + render: ({ record }) =>
Custom: {record.name}
, + field: "name", + }, + ], + }); + await loadMockWidgetModelMetadata(); + await loadWidgetData(); + + const customColumn = result.current[0].columns?.find((col) => col.type === "CustomRenderer"); + expect(customColumn?.sortable).toBe(true); + expect(customColumn?.field).toBe("name"); + }); + + it("should not be sortable when field is provided but sortable is set to false", async () => { + const result = getUseTableResult({ + columns: [ + { + header: "Custom Name", + render: ({ record }) =>
Custom: {record.name}
, + field: "name", + sortable: false, + }, + ], + }); + await loadMockWidgetModelMetadata(); + await loadWidgetData(); + + const customColumn = result.current[0].columns?.find((col) => col.type === "CustomRenderer"); + expect(customColumn?.sortable).toBe(false); + expect(customColumn?.field).toBe("name"); + }); + + it("should not be sortable when the field itself is not sortable", async () => { + const result = getUseTableResult({ + columns: [ + { + header: "Custom ID", + render: ({ record }) =>
Custom: {record.id}
, + field: "id", + }, + ], + }); + await loadMockWidgetModelMetadata(); + await loadWidgetData(); + + const customColumn = result.current[0].columns?.find((col) => col.type === "CustomRenderer"); + expect(customColumn?.sortable).toBe(false); + expect(customColumn?.field).toBe("id"); + }); + + it("should throw an error when trying to make a non-sortable field sortable", async () => { + let error: Error | undefined; + try { + getUseTableResult({ + columns: [ + { + header: "Custom ID", + render: ({ record }) =>
Custom: {record.id}
, + field: "id", + sortable: true, + }, + ], + }); + await loadMockWidgetModelMetadata(); + } catch (err) { + error = err as Error; + } + + expect(error!.message).toBe("Field 'id' is not sortable"); + }); }); describe("select property", () => { diff --git a/packages/react/src/auto/polaris/PolarisAutoTable.tsx b/packages/react/src/auto/polaris/PolarisAutoTable.tsx index b5c860a68..af0037457 100644 --- a/packages/react/src/auto/polaris/PolarisAutoTable.tsx +++ b/packages/react/src/auto/polaris/PolarisAutoTable.tsx @@ -51,7 +51,7 @@ const gadgetToPolarisDirection = (direction?: SortOrder) => { }; const maybeGetColumnIndex = (columns: TableColumn[], apiIdentifier: string | undefined) => { - return columns.findIndex((column) => (column.type === "CustomRenderer" ? undefined : column.field === apiIdentifier)); + return columns.findIndex((column) => column.field === apiIdentifier); }; export type PolarisAutoTableProps< @@ -130,7 +130,7 @@ const PolarisAutoTableComponent = < const handleColumnSort = (headingIndex: number) => { if (columns) { const currentColumn = columns[headingIndex]; - const columnApiIdentifier = currentColumn.type === "CustomRenderer" ? undefined : currentColumn.field; + const columnApiIdentifier = currentColumn.field; if (columnApiIdentifier) { sort.handleColumnSort(columnApiIdentifier); } diff --git a/packages/react/src/auto/shadcn/ShadcnAutoTable.tsx b/packages/react/src/auto/shadcn/ShadcnAutoTable.tsx index f7d6b35ed..91c2b4603 100644 --- a/packages/react/src/auto/shadcn/ShadcnAutoTable.tsx +++ b/packages/react/src/auto/shadcn/ShadcnAutoTable.tsx @@ -135,12 +135,12 @@ export const makeAutoTable = (elements: ShadcnElements) => { <>
- {column.sortable ? ( + {column.sortable && column.field ? (