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 ? (