This commit is contained in:
Sianida26 2024-02-07 02:57:12 +07:00
parent 7800fb471c
commit 840f5aa6dd
2 changed files with 50 additions and 46 deletions

View File

@ -10,59 +10,65 @@ import columns, { UserRow } from "./columns";
import { Table, Text } from "@mantine/core"; import { Table, Text } from "@mantine/core";
interface Props { interface Props {
users: UserRow[] users: UserRow[];
} }
export default function UsersTable({users}: Props) { export default function UsersTable({ users }: Props) {
const table = useReactTable({ const table = useReactTable({
data: users, data: users,
columns, columns,
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
defaultColumn: { defaultColumn: {
cell: (props) => <Text>{props.getValue() as React.ReactNode}</Text> cell: (props) => <Text>{props.getValue() as React.ReactNode}</Text>,
} },
}); });
// TODO: Add view when data is empty
return ( return (
<> <Table verticalSpacing="xs" horizontalSpacing="xs">
<Table verticalSpacing="xs" horizontalSpacing="xs"> {/* Thead */}
{/* Thead */} <Table.Thead>
<Table.Thead> {table.getHeaderGroups().map((headerGroup) => (
{table.getHeaderGroups().map((headerGroup) => ( <Table.Tr key={headerGroup.id}>
<Table.Tr key={headerGroup.id}> {headerGroup.headers.map((header) => (
{headerGroup.headers.map((header) => ( <Table.Th
<Table.Th key={header.id} style={{maxWidth: `${header.column.columnDef.maxSize}px`, width: `${header.getSize()}`}}> key={header.id}
{header.isPlaceholder style={{
? null maxWidth: `${header.column.columnDef.maxSize}px`,
: flexRender( width: `${header.getSize()}`,
header.column.columnDef.header, }}
header.getContext() >
)} {header.isPlaceholder
</Table.Th> ? null
))} : flexRender(
</Table.Tr> header.column.columnDef.header,
))} header.getContext()
</Table.Thead> )}
</Table.Th>
))}
</Table.Tr>
))}
</Table.Thead>
{/* TBody */} {/* TBody */}
<Table.Tbody> <Table.Tbody>
{table.getRowModel().rows.map((row) => ( {table.getRowModel().rows.map((row) => (
<Table.Tr key={row.id}> <Table.Tr key={row.id}>
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => (
<Table.Td key={cell.id} style={{maxWidth: `${cell.column.columnDef.maxSize}px`}}> <Table.Td
{flexRender( key={cell.id}
cell.column.columnDef.cell, style={{
cell.getContext(), maxWidth: `${cell.column.columnDef.maxSize}px`,
)} }}
</Table.Td> >
))} {flexRender(
</Table.Tr> cell.column.columnDef.cell,
))} cell.getContext()
</Table.Tbody> )}
</Table> </Table.Td>
</> ))}
</Table.Tr>
))}
</Table.Tbody>
</Table>
); );
} }

View File

@ -46,8 +46,6 @@ export default async function UsersPage({searchParams}: Props) {
return null; return null;
} }
// TODO: Add functinoality for create new user
return ( return (
<Stack className="flex flex-col"> <Stack className="flex flex-col">
<Title order={1}>Users</Title> <Title order={1}>Users</Title>