ti.sil/sourcebot
1
0
Fork 0
mirror of https://github.com/sourcebot-dev/sourcebot.git synced 2025-12-12 12:25:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fixed column width

Browse source
This commit is contained in:
bkellam 2025-10-23 17:17:32 -07:00
parent 8168ec2c1f
commit 662ebee14c
1 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
packages/web/src/app/[domain]/repos/components/reposTable.tsx
View file

@ -14,7 +14,7 @@ import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants" import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants"
import { CodeHostType, getCodeHostCommitUrl, getCodeHostInfoForRepo, getFormattedDate, getRepoImageSrc } from "@/lib/utils" import { CodeHostType, getCodeHostCommitUrl, getCodeHostInfoForRepo, getRepoImageSrc } from "@/lib/utils"
import { import {
type ColumnDef, type ColumnDef,
type ColumnFiltersState, type ColumnFiltersState,
@ -81,14 +81,10 @@ const getStatusBadge = (status: Repo["latestJobStatus"]) => {
return <Badge className={statusBadgeVariants({ status })}>{labels[status]}</Badge> return <Badge className={statusBadgeVariants({ status })}>{labels[status]}</Badge>
} }
const formatDate = (date: Date | null) => {
if (!date) return "Never"
return getFormattedDate(date);
}
export const columns: ColumnDef<Repo>[] = [ export const columns: ColumnDef<Repo>[] = [
{ {
accessorKey: "displayName", accessorKey: "displayName",
size: 400,
header: ({ column }) => { header: ({ column }) => {
return ( return (
<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}> <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
@ -128,11 +124,13 @@ export const columns: ColumnDef<Repo>[] = [
}, },
{ {
accessorKey: "latestJobStatus", accessorKey: "latestJobStatus",
size: 150,
header: "Lastest status", header: "Lastest status",
cell: ({ row }) => getStatusBadge(row.getValue("latestJobStatus")), cell: ({ row }) => getStatusBadge(row.getValue("latestJobStatus")),
}, },
{ {
accessorKey: "indexedAt", accessorKey: "indexedAt",
size: 200,
header: ({ column }) => { header: ({ column }) => {
return ( return (
<Button <Button
@ -157,6 +155,7 @@ export const columns: ColumnDef<Repo>[] = [
}, },
{ {
accessorKey: "indexedCommitHash", accessorKey: "indexedCommitHash",
size: 120,
header: "Last commit", header: "Last commit",
cell: ({ row }) => { cell: ({ row }) => {
const hash = row.getValue("indexedCommitHash") as string | null; const hash = row.getValue("indexedCommitHash") as string | null;
@ -189,6 +188,7 @@ export const columns: ColumnDef<Repo>[] = [
}, },
{ {
id: "actions", id: "actions",
size: 80,
enableHiding: false, enableHiding: false,
cell: ({ row }) => { cell: ({ row }) => {
const repo = row.original const repo = row.original
@ -265,6 +265,8 @@ export const ReposTable = ({ data }: { data: Repo[] }) => {
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility, onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection, onRowSelectionChange: setRowSelection,
columnResizeMode: 'onChange',
enableColumnResizing: false,
state: { state: {
sorting, sorting,
columnFilters, columnFilters,
@ -315,13 +317,16 @@ export const ReposTable = ({ data }: { data: Repo[] }) => {
</Button> </Button>
</div> </div>
<div className="rounded-md border"> <div className="rounded-md border">
<Table> <Table style={{ tableLayout: 'fixed', width: '100%' }}>
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}> <TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => { {headerGroup.headers.map((header) => {
return ( return (
<TableHead key={header.id}> <TableHead
key={header.id}
style={{ width: `${header.getSize()}px` }}
>
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</TableHead> </TableHead>
) )
@ -334,7 +339,12 @@ export const ReposTable = ({ data }: { data: Repo[] }) => {
table.getRowModel().rows.map((row) => ( table.getRowModel().rows.map((row) => (
<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}> <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell> <TableCell
key={cell.id}
style={{ width: `${cell.column.getSize()}px` }}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))} ))}
</TableRow> </TableRow>
)) ))