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