Lint
This commit is contained in:
parent
7800fb471c
commit
840f5aa6dd
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user