diff --git a/.changeset/stale-weeks-vanish.md b/.changeset/stale-weeks-vanish.md new file mode 100644 index 0000000..7a4f017 --- /dev/null +++ b/.changeset/stale-weeks-vanish.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +add empty placeholder customization props diff --git a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx index 8b6292b..85cac9f 100644 --- a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx +++ b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx @@ -512,6 +512,51 @@ describe("", () => { screen.getByRole("img", { name: /illustration of an empty table/i }); screen.getByText(/this table is empty/i); }); + it("should render an empty grid with custom label and cta", async () => { + const rows: Row[] = []; + render( + + Custom empty CTA} + /> + , + ); + + screen.getByRole("img", { name: /illustration of an empty table/i }); + expect(screen.queryByText(/this table is empty/i)).not.toBeInTheDocument(); + screen.getByText(/Custom empty label/i); + screen.getByRole("button", { name: /Custom empty CTA/i }); + }); + it("should render an empty grid without image", async () => { + const rows: Row[] = []; + render( + + + , + ); + + expect( + screen.queryByRole("img", { name: /illustration of an empty table/i }), + ).not.toBeInTheDocument(); + screen.getByText(/this table is empty/i); + }); it("should render a loading grid even if rows are empty", async () => { const rows: Row[] = []; render( diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx index 2860647..0cf2e12 100644 --- a/packages/react/src/components/DataGrid/index.stories.tsx +++ b/packages/react/src/components/DataGrid/index.stories.tsx @@ -26,6 +26,46 @@ export const Empty = () => { /> ); }; +export const EmptyCustomWithButton = () => { + return ( + add} + > + Create object + + } + /> + ); +}; + +export const EmptyCustomNoImage = () => { + return ( + + ); +}; export const Loading = () => { return ( diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx index 86db957..0f3edf8 100644 --- a/packages/react/src/components/DataGrid/index.tsx +++ b/packages/react/src/components/DataGrid/index.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React, { ReactNode, useMemo } from "react"; import classNames from "classnames"; import { flexRender, @@ -52,6 +52,9 @@ export interface BaseProps { enableRowSelection?: TableOptions["enableRowSelection"]; onRowSelectionChange?: (newSelection: RowSelectionState) => void; rowSelection?: RowSelectionState; + emptyPlaceholderLabel?: string; + emptyCta?: ReactNode; + hideEmptyPlaceholderImage?: boolean; } export interface DataGridProps extends BaseProps { @@ -74,6 +77,9 @@ export const DataGrid = ({ onRowSelectionChange, rowSelection, tableOptions, + emptyPlaceholderLabel, + emptyCta, + hideEmptyPlaceholderImage, displayHeader = true, }: DataGridProps) => { const { t } = useCunningham(); @@ -143,8 +149,12 @@ export const DataGrid = ({ if (showEmptyPlaceholder) { return (
- {t("components.datagrid.empty_alt")} - {t("components.datagrid.empty")} + {!hideEmptyPlaceholderImage && ( + {t("components.datagrid.empty_alt")} + )} + + {emptyPlaceholderLabel ?? t("components.datagrid.empty")} + {emptyCta}
); }