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,31 +10,33 @@ 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 key={header.id} style={{maxWidth: `${header.column.columnDef.maxSize}px`, width: `${header.getSize()}`}}> <Table.Th
key={header.id}
style={{
maxWidth: `${header.column.columnDef.maxSize}px`,
width: `${header.getSize()}`,
}}
>
{header.isPlaceholder {header.isPlaceholder
? null ? null
: flexRender( : flexRender(
@ -52,10 +54,15 @@ export default function UsersTable({users}: Props) {
{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
key={cell.id}
style={{
maxWidth: `${cell.column.columnDef.maxSize}px`,
}}
>
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext(), cell.getContext()
)} )}
</Table.Td> </Table.Td>
))} ))}
@ -63,6 +70,5 @@ export default function UsersTable({users}: Props) {
))} ))}
</Table.Tbody> </Table.Tbody>
</Table> </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>