ershisan99/db-studio
1
0
Fork 0
mirror of https://github.com/ershisan99/db-studio.git synced 2025-12-16 12:33:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor data table a bit

Browse Source
This commit is contained in:
andres
2024-07-14 13:13:27 +02:00
parent 1e09a32022
commit 1e3effcf76
2 changed files with 113 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
frontend/src/components/db-table-view/data-table.tsx
View File

@@ -1,3 +1,4 @@
import { TableView } from "@/components/db-table-view/table";
import { import {
Button, Button,
DataTablePagination, DataTablePagination,
@@ -6,12 +7,6 @@ import {
DropdownMenuContent, DropdownMenuContent,
DropdownMenuTrigger, DropdownMenuTrigger,
FormInput, FormInput,
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
Tooltip, Tooltip,
} from "@/components/ui"; } from "@/components/ui";
import { cn, isImageUrl, isUrl } from "@/lib/utils"; import { cn, isImageUrl, isUrl } from "@/lib/utils";
@@ -23,11 +18,10 @@ import {
type PaginationState, type PaginationState,
type SortingState, type SortingState,
type VisibilityState, type VisibilityState,
flexRender,
getCoreRowModel, getCoreRowModel,
useReactTable, useReactTable,
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { ArrowUp, Info, Rows3, Search } from "lucide-react"; import { Info, Rows3, Search } from "lucide-react";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
@@ -237,102 +231,7 @@ export const DataTable = ({
<div className="rounded-md border min-h-0 h-full w-full min-w-0 flex flex-col"> <div className="rounded-md border min-h-0 h-full w-full min-w-0 flex flex-col">
<div className={"flex flex-col flex-1 overflow-auto relative"}> <div className={"flex flex-col flex-1 overflow-auto relative"}>
<Table <TableView table={table} columnLength={columns.length} />
className={"table-fixed min-w-full"}
{...{
style: {
width: table.getCenterTotalSize(),
},
}}
>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className={"sticky top-0"}>
{headerGroup.headers.map((header) => {
const sorted = header.column.getIsSorted();
return (
<TableHead
className={"p-0 relative"}
key={header.id}
style={{
width: header.getSize(),
}}
>
<Button
variant="ghost"
onClick={header.column.getToggleSortingHandler()}
className={"select-text"}
title={
header.column.getNextSortingOrder() === "asc"
? "Sort ascending"
: header.column.getNextSortingOrder() === "desc"
? "Sort descending"
: "Clear sort"
}
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
<ArrowUp
className={cn(
"ml-2 size-4 opacity-0 transition-transform",
sorted && "opacity-100",
(sorted as string) === "desc" && "rotate-180",
)}
/>
</Button>
<div
{...{
onDoubleClick: () => header.column.resetSize(),
onMouseDown: header.getResizeHandler(),
onTouchStart: header.getResizeHandler(),
className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
}}
/>
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell
key={cell.id}
style={{
width: cell.column.getSize(),
}}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div> </div>
</div> </div>
<DataTablePagination table={table} /> <DataTablePagination table={table} />

110
frontend/src/components/db-table-view/table.tsx Normal file
View File

@@ -0,0 +1,110 @@
import {
Button,
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui";
import { cn } from "@/lib/utils";
import { type Table as ReactTable, flexRender } from "@tanstack/react-table";
import { ArrowUp } from "lucide-react";
export function TableView<T>({
table,
columnLength = 1,
}: { table: ReactTable<T>; columnLength?: number }) {
return (
<Table
className={"table-fixed min-w-full"}
{...{
style: {
width: table.getCenterTotalSize(),
},
}}
>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className={"sticky top-0"}>
{headerGroup.headers.map((header) => {
const sorted = header.column.getIsSorted();
return (
<TableHead
className={"p-0 relative"}
key={header.id}
style={{
width: header.getSize(),
}}
>
<Button
variant="ghost"
onClick={header.column.getToggleSortingHandler()}
className={"select-text"}
title={
header.column.getNextSortingOrder() === "asc"
? "Sort ascending"
: header.column.getNextSortingOrder() === "desc"
? "Sort descending"
: "Clear sort"
}
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
<ArrowUp
className={cn(
"ml-2 size-4 opacity-0 transition-transform",
sorted && "opacity-100",
(sorted as string) === "desc" && "rotate-180",
)}
/>
</Button>
<div
{...{
onDoubleClick: () => header.column.resetSize(),
onMouseDown: header.getResizeHandler(),
onTouchStart: header.getResizeHandler(),
className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
}}
/>
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell
key={cell.id}
style={{
width: cell.column.getSize(),
}}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columnLength} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
);
}