✨(react) add empty placeholder customization props

We want to be able to customize the empty placeholder label, add a
call to action and choose whether we want to display the image as well.

Closes #27

packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx

@@ -512,6 +512,51 @@ describe("<SimpleDataGrid/>", () => {
     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(
+      <CunninghamProvider>
+        <SimpleDataGrid
+          columns={[
+            {
+              field: "firstName",
+              headerName: "First name",
+            },
+          ]}
+          rows={rows}
+          emptyPlaceholderLabel="Custom empty label"
+          emptyCta={<button>Custom empty CTA</button>}
+        />
+      </CunninghamProvider>,
+    );
+
+    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(
+      <CunninghamProvider>
+        <SimpleDataGrid
+          columns={[
+            {
+              field: "firstName",
+              headerName: "First name",
+            },
+          ]}
+          rows={rows}
+          hideEmptyPlaceholderImage={true}
+        />
+      </CunninghamProvider>,
+    );
+
+    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(

packages/react/src/components/DataGrid/index.stories.tsx

@@ -26,6 +26,46 @@ export const Empty = () => {
     />
   );
 };
+export const EmptyCustomWithButton = () => {
+  return (
+    <DataGrid
+      columns={[
+        {
+          field: "firstName",
+          headerName: "First name",
+          highlight: true,
+        },
+      ]}
+      rows={[]}
+      emptyPlaceholderLabel="This table is empty, create the first object"
+      emptyCta={
+        <Button
+          color="secondary"
+          icon={<span className="material-icons">add</span>}
+        >
+          Create object
+        </Button>
+      }
+    />
+  );
+};
+
+export const EmptyCustomNoImage = () => {
+  return (
+    <DataGrid
+      columns={[
+        {
+          field: "firstName",
+          headerName: "First name",
+          highlight: true,
+        },
+      ]}
+      rows={[]}
+      hideEmptyPlaceholderImage={true}
+      emptyPlaceholderLabel="This table is empty :("
+    />
+  );
+};
 
 export const Loading = () => {
   return (

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<T extends Row = Row> {
   enableRowSelection?: TableOptions<T>["enableRowSelection"];
   onRowSelectionChange?: (newSelection: RowSelectionState) => void;
   rowSelection?: RowSelectionState;
+  emptyPlaceholderLabel?: string;
+  emptyCta?: ReactNode;
+  hideEmptyPlaceholderImage?: boolean;
 }
 
 export interface DataGridProps<T extends Row = Row> extends BaseProps<T> {
@@ -74,6 +77,9 @@ export const DataGrid = <T extends Row>({
   onRowSelectionChange,
   rowSelection,
   tableOptions,
+  emptyPlaceholderLabel,
+  emptyCta,
+  hideEmptyPlaceholderImage,
   displayHeader = true,
 }: DataGridProps<T>) => {
   const { t } = useCunningham();
@@ -143,8 +149,12 @@ export const DataGrid = <T extends Row>({
     if (showEmptyPlaceholder) {
       return (
         <div className="c__datagrid__empty-placeholder fs-h3 clr-greyscale-900 fw-bold">
-          <img src={emptyImageUrl} alt={t("components.datagrid.empty_alt")} />
-          {t("components.datagrid.empty")}
+          {!hideEmptyPlaceholderImage && (
+            <img src={emptyImageUrl} alt={t("components.datagrid.empty_alt")} />
+          )}
+
+          {emptyPlaceholderLabel ?? t("components.datagrid.empty")}
+          {emptyCta}
         </div>
       );
     }