gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added scrollarea on table

Browse Source
This commit is contained in:
sianida26 2024-03-23 03:15:14 +07:00
parent 852459fdc2
commit d06010abe6
1 changed files with 54 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/modules/dashboard/components/DashboardTable.tsx
View File

@ -1,68 +1,70 @@
"use client";
import React from "react";
import { Table, Center } from "@mantine/core"
import { Table, Center, ScrollArea } from "@mantine/core";
import { Table as ReactTable, flexRender } from "@tanstack/react-table";
interface Props<TData> {
table: ReactTable<TData>
table: ReactTable<TData>;
}
export default function DashboardTable<T>({table}: Props<T>) {
export default function DashboardTable<T>({ table }: Props<T>) {
return (
<Table verticalSpacing="xs" horizontalSpacing="xs">
{/* Thead */}
<Table.Thead>
{table.getHeaderGroups().map((headerGroup) => (
<Table.Tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<Table.Th
key={header.id}
style={{
maxWidth: `${header.column.columnDef.maxSize}px`,
width: `${header.getSize()}`,
}}
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</Table.Th>
))}
</Table.Tr>
))}
</Table.Thead>
{/* Tbody */}
<Table.Tbody>
{table.getRowModel().rows.length > 0 ? (
table.getRowModel().rows.map((row) => (
<Table.Tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<Table.Td
key={cell.id}
<ScrollArea.Autosize>
<Table verticalSpacing="xs" horizontalSpacing="xs">
{/* Thead */}
<Table.Thead>
{table.getHeaderGroups().map((headerGroup) => (
<Table.Tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<Table.Th
key={header.id}
style={{
maxWidth: `${cell.column.columnDef.maxSize}px`,
maxWidth: `${header.column.columnDef.maxSize}px`,
width: `${header.getSize()}`,
}}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</Table.Td>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</Table.Th>
))}
</Table.Tr>
))
) : (
<Table.Tr>
<Table.Td colSpan={table.getAllColumns().length}>
<Center>- No Data -</Center>
</Table.Td>
</Table.Tr>
)}
</Table.Tbody>
</Table>
))}
</Table.Thead>
{/* Tbody */}
<Table.Tbody>
{table.getRowModel().rows.length > 0 ? (
table.getRowModel().rows.map((row) => (
<Table.Tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<Table.Td
key={cell.id}
style={{
maxWidth: `${cell.column.columnDef.maxSize}px`,
}}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</Table.Td>
))}
</Table.Tr>
))
) : (
<Table.Tr>
<Table.Td colSpan={table.getAllColumns().length}>
<Center>- No Data -</Center>
</Table.Td>
</Table.Tr>
)}
</Table.Tbody>
</Table>
</ScrollArea.Autosize>
);
}