feat(tables): add emptyLabel prop to DataTable

MTES-MCT · Nov 13, 2024 · b7f025a · b7f025a
1 parent 9a48fef
commit b7f025a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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,13 +18,15 @@ 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
 }
 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
@@ -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: {