43 lines
973 B
JavaScript
43 lines
973 B
JavaScript
import { Box, Table } from '@mantine/core'
|
|
|
|
export default function Datatable({ columns, data, withCheckbox = false }) {
|
|
const renderCols = columns.map((col) => (
|
|
<Table.Th key={col.field} w={col.width}>
|
|
{col.title}
|
|
</Table.Th>
|
|
))
|
|
|
|
const renderRows = data.map((row) => (
|
|
<Table.Tr key={row.id}>
|
|
{columns.map((col) => (
|
|
<Table.Td key={col.field}>
|
|
{col.render ? col.render(row) : row[col.field]}
|
|
</Table.Td>
|
|
))}
|
|
</Table.Tr>
|
|
))
|
|
|
|
return (
|
|
<Box
|
|
style={(theme) => ({
|
|
border: `1px solid ${theme.colors.gray[3]}`,
|
|
overflow: 'hidden',
|
|
borderRadius: '10px',
|
|
})}
|
|
>
|
|
<Table
|
|
striped
|
|
highlightOnHover
|
|
withColumnBorders
|
|
bg="white"
|
|
verticalSpacing="sm"
|
|
>
|
|
<Table.Thead>
|
|
<Table.Tr>{renderCols}</Table.Tr>
|
|
</Table.Thead>
|
|
<Table.Tbody>{renderRows}</Table.Tbody>
|
|
</Table>
|
|
</Box>
|
|
)
|
|
}
|