pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-10 04:36:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve formatting in data tables

Browse Source
This commit is contained in:
Milo Schwartz
2024-11-25 23:07:21 -05:00
parent 2312258468
commit 7c9e57ef12
12 changed files with 154 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/[orgId]/settings/sites/components/SitesDataTable.tsx
View File

@@ -24,7 +24,7 @@ import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "../../../../../components/DataTablePagination";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@@ -62,19 +62,23 @@ export function SitesDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search sites"
value={
(table.getColumn("name")?.getFilterValue() as string) ??
""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search sites"
value={
(table
.getColumn("name")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addSite) {
@@ -98,7 +102,7 @@ export function SitesDataTable<TData, TValue>({
: flexRender(
header.column.columnDef
.header,
header.getContext()
header.getContext(),
)}
</TableHead>
);
@@ -119,7 +123,7 @@ export function SitesDataTable<TData, TValue>({
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
cell.getContext(),
)}
</TableCell>
))}

42
src/app/[orgId]/settings/sites/components/SitesTable.tsx
View File

@@ -100,15 +100,51 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
},
{
accessorKey: "mbIn",
header: "MB In",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Data In
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "mbOut",
header: "MB Out",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Data Out
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "type",
header: "Connection Type",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Connection Type
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const originalRow = row.original;