diff --git a/.changeset/three-tables-leave.md b/.changeset/three-tables-leave.md new file mode 100644 index 000000000..8f356c0a2 --- /dev/null +++ b/.changeset/three-tables-leave.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": patch +--- + +add enableSorting support on DataGrid diff --git a/packages/react/src/components/DataGrid/DataList.tsx b/packages/react/src/components/DataGrid/DataList.tsx index 7a9c54f04..625d11367 100644 --- a/packages/react/src/components/DataGrid/DataList.tsx +++ b/packages/react/src/components/DataGrid/DataList.tsx @@ -9,8 +9,8 @@ export const DataList = ({ rows, ...props }: BaseProps) => { rows={rows} columns={props.columns.map((column) => ({ ...column, - enableSorting: false, }))} + enableSorting={false} /> ); }; diff --git a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx index e871da76b..4b2a55b6e 100644 --- a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx +++ b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx @@ -678,4 +678,66 @@ describe("", () => { name: "Loading data", }); }); + + it("should render a grid with non-sortable columns by using enableSorting=false at DataGrid level", async () => { + const rows = Array.from(Array(23)) + .map(() => ({ + id: faker.string.uuid(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + email: faker.internet.email(), + address: faker.location.streetAddress(), + })) + .sort((a, b) => a.firstName.localeCompare(b.firstName)); + + const Wrapper = ({ enableSorting }: { enableSorting: boolean }) => { + return ( + + + + ); + }; + + const { rerender } = render(); + + const table = screen.getByRole("table"); + const ths = getAllByRole(table, "columnheader"); + expect(ths.length).toBe(4); + + ths.forEach((th) => { + // headers are turned into buttons exclusively when they are sortable + expect(within(th).queryByRole("button")).toBeInTheDocument(); + }); + + rerender(); + + ths.forEach((th) => { + // headers are turned into buttons exclusively when they are sortable + expect(within(th).queryByRole("button")).not.toBeInTheDocument(); + }); + }); }); diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx index 7e7606b19..acf4ed7cb 100644 --- a/packages/react/src/components/DataGrid/index.tsx +++ b/packages/react/src/components/DataGrid/index.tsx @@ -62,6 +62,7 @@ export interface BaseProps { emptyPlaceholderLabel?: string; emptyCta?: ReactNode; hideEmptyPlaceholderImage?: boolean; + enableSorting?: boolean; } export interface DataGridProps extends BaseProps { @@ -88,6 +89,7 @@ export const DataGrid = ({ emptyCta, hideEmptyPlaceholderImage, displayHeader = true, + enableSorting = true, }: DataGridProps) => { const { t } = useCunningham(); const headlessColumns = useHeadlessColumns({ columns, enableRowSelection }); @@ -124,6 +126,7 @@ export const DataGrid = ({ pagination: paginationState, }, // Sorting + enableSorting, getSortedRowModel: getSortedRowModel(), manualSorting: true, onSortingChange: (newHeadlessSorting) => {