feat: gestion des no data dans les table [#33]

This commit is contained in:
N3WT DE COMPET
2025-05-17 14:35:33 +02:00
parent 3990d75e52
commit 2888f8dcce
14 changed files with 258 additions and 103 deletions

View File

@ -14,6 +14,7 @@ const Table = ({
selectedRows,
isSelectable = false,
defaultTheme = 'bg-emerald-50', // Blanc cassé pour les lignes paires
emptyMessage = null,
}) => {
const handlePageChange = (newPage) => {
onPageChange(newPage);
@ -35,49 +36,55 @@ const Table = ({
</tr>
</thead>
<tbody>
{data?.map((row, rowIndex) => (
<tr
key={rowIndex}
className={`
${isSelectable ? 'cursor-pointer' : ''}
${
selectedRows?.includes(row.id)
? 'bg-emerald-200 text-white'
: rowIndex % 2 === 0
? `${defaultTheme}`
: 'bg-stone-50' // Blanc cassé pour les lignes impaires
}
${isSelectable ? 'hover:bg-emerald-100' : ''}
`}
onClick={() => {
if (isSelectable && onRowClick) {
if (selectedRows?.includes(row.id)) {
onRowClick({ deselected: true, row });
} else {
onRowClick(row);
}
}
}}
>
{columns.map((column, colIndex) => (
<td
key={colIndex}
className={`py-2 px-4 border-b border-gray-300 text-center text-sm ${
{data && data.length > 0 ? (
data.map((row, rowIndex) => (
<tr
key={rowIndex}
className={`
${isSelectable ? 'cursor-pointer' : ''}
${
selectedRows?.includes(row.id)
? 'text-white'
: 'text-gray-700'
}`}
>
{renderCell
? renderCell(row, column.name)
: column.transform(row)}
</td>
))}
? 'bg-emerald-200 text-white'
: rowIndex % 2 === 0
? `${defaultTheme}`
: 'bg-stone-50'
}
${isSelectable ? 'hover:bg-emerald-100' : ''}
`}
onClick={() => {
if (isSelectable && onRowClick) {
if (selectedRows?.includes(row.id)) {
onRowClick({ deselected: true, row });
} else {
onRowClick(row);
}
}
}}
>
{columns.map((column, colIndex) => (
<td
key={colIndex}
className={`py-2 px-4 border-b border-gray-300 text-center text-sm ${
selectedRows?.includes(row.id)
? 'text-white'
: 'text-gray-700'
}`}
>
{renderCell
? renderCell(row, column.name)
: column.transform(row)}
</td>
))}
</tr>
))
) : (
<tr>
<td colSpan={columns.length}>{emptyMessage}</td>
</tr>
))}
)}
</tbody>
</table>
{itemsPerPage > 0 && (
{itemsPerPage > 0 && data && data.length > 0 && (
<Pagination
currentPage={currentPage}
totalPages={totalPages}