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";
interface Props {
users: UserRow[]
users: UserRow[];
}
export default function UsersTable({users}: Props) {
export default function UsersTable({ users }: Props) {
const table = useReactTable({
data: users,
columns,
getCoreRowModel: getCoreRowModel(),
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 (
<>
<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>
<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.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.Tbody>
</Table>
</>
{/* TBody */}
<Table.Tbody>
{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.Tbody>
</Table>
);
}

View File

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