From b7f025a7642ed10e5e241a91ab3b7e6ed8d0e822 Mon Sep 17 00:00:00 2001
From: Ivan Gabriele <ivan.gabriele@protonmail.com>
Date: Wed, 13 Nov 2024 10:28:52 +0100
Subject: [PATCH] feat(tables): add emptyLabel prop to DataTable

---
 .storybook/constants.tsx             | 8 ++++++++
 src/tables/DataTable/index.tsx       | 8 +++++---
 stories/tables/DataTable.stories.tsx | 1 +
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/.storybook/constants.tsx b/.storybook/constants.tsx
index 94f4d0eb8..265bed4a0 100644
--- a/.storybook/constants.tsx
+++ b/.storybook/constants.tsx
@@ -169,6 +169,14 @@ const ARG_TYPE_TYPED: Meta['argTypes'] = {
       }
     }
   },
+  OPTIONAL_REACT_NODE: {
+    control: 'text',
+    table: {
+      type: {
+        summary: 'ReactNode | undefined'
+      }
+    }
+  },
   OPTIONAL_SIZE: {
     control: 'radio',
     // eslint-disable-next-line object-shorthand
diff --git a/src/tables/DataTable/index.tsx b/src/tables/DataTable/index.tsx
index f0afc8ec5..99e529e32 100644
--- a/src/tables/DataTable/index.tsx
+++ b/src/tables/DataTable/index.tsx
@@ -6,7 +6,7 @@ import {
   getSortedRowModel,
   useReactTable
 } from '@tanstack/react-table'
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import styled from 'styled-components'
 
 import { Td } from './Td'
@@ -18,6 +18,7 @@ import type { AnyObject } from '../../types/definitions'
 export type DataTableProps<T extends AnyObject> = {
   columns: Array<ColumnDef<T>>
   data: T[] | undefined
+  emptyLabel?: ReactNode
   initialSorting: SortingState
   tableOptions?: Partial<TableOptions<T>> | undefined
   withoutHead?: boolean | undefined
@@ -25,6 +26,7 @@ export type DataTableProps<T extends AnyObject> = {
 export function DataTable<T extends AnyObject>({
   columns,
   data,
+  emptyLabel,
   initialSorting,
   tableOptions,
   withoutHead = false
@@ -49,11 +51,11 @@ export function DataTable<T extends AnyObject>({
 
   return (
     <>
-      {!data && <p>Chargement en cours...</p>}
+      {!data && <p className="Table-DataTable--loadingLabel">Chargement en cours...</p>}
 
       {data && (
         <>
-          {!data.length && <p>Aucune donnée.</p>}
+          {!data.length && (emptyLabel ?? <p className="Table-DataTable--emptyLabel">Aucune donnée.</p>)}
 
           {data.length > 0 && (
             <SimpleTable.Table>
diff --git a/stories/tables/DataTable.stories.tsx b/stories/tables/DataTable.stories.tsx
index ba60332dd..30838aa7a 100644
--- a/stories/tables/DataTable.stories.tsx
+++ b/stories/tables/DataTable.stories.tsx
@@ -29,6 +29,7 @@ const meta: Meta<DataTableProps<FakeBasicTableDataItem>> = {
   component: DataTable,
 
   argTypes: {
+    emptyLabel: ARG_TYPE.OPTIONAL_REACT_NODE,
     tableOptions: {
       ...ARG_TYPE.NO_CONTROL_INPUT,
       table: {