make actions sticky in targets and rules input

This commit is contained in:
miloschwartz
2025-11-08 14:39:14 -08:00
parent 10f8298161
commit 693c9fbe0f
6 changed files with 113 additions and 85 deletions

View File

@@ -1420,21 +1420,25 @@ export default function ReverseProxyTargets(props: {
.map((headerGroup) => ( .map((headerGroup) => (
<TableRow key={headerGroup.id}> <TableRow key={headerGroup.id}>
{headerGroup.headers.map( {headerGroup.headers.map(
(header) => ( (header) => {
<TableHead const isActionsColumn = header.column.id === "actions";
key={header.id} return (
> <TableHead
{header.isPlaceholder key={header.id}
? null className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
: flexRender( >
header {header.isPlaceholder
.column ? null
.columnDef : flexRender(
.header, header
header.getContext() .column
)} .columnDef
</TableHead> .header,
) header.getContext()
)}
</TableHead>
);
}
)} )}
</TableRow> </TableRow>
))} ))}
@@ -1447,21 +1451,25 @@ export default function ReverseProxyTargets(props: {
<TableRow key={row.id}> <TableRow key={row.id}>
{row {row
.getVisibleCells() .getVisibleCells()
.map((cell) => ( .map((cell) => {
<TableCell const isActionsColumn = cell.column.id === "actions";
key={ return (
cell.id <TableCell
} key={
> cell.id
{flexRender( }
cell className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
.column >
.columnDef {flexRender(
.cell, cell
cell.getContext() .column
)} .columnDef
</TableCell> .cell,
))} cell.getContext()
)}
</TableCell>
);
})}
</TableRow> </TableRow>
)) ))
) : ( ) : (

View File

@@ -832,7 +832,7 @@ export default function ResourceRules(props: {
/> />
<Button <Button
type="submit" type="submit"
variant="secondary" variant="outline"
disabled={!rulesEnabled} disabled={!rulesEnabled}
> >
{t('ruleSubmit')} {t('ruleSubmit')}
@@ -844,17 +844,23 @@ export default function ResourceRules(props: {
<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) => {
<TableHead key={header.id}> const isActionsColumn = header.column.id === "actions";
{header.isPlaceholder return (
? null <TableHead
: flexRender( key={header.id}
header.column.columnDef className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
.header, >
header.getContext() {header.isPlaceholder
)} ? null
</TableHead> : flexRender(
))} header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow> </TableRow>
))} ))}
</TableHeader> </TableHeader>
@@ -862,14 +868,20 @@ export default function ResourceRules(props: {
{table.getRowModel().rows?.length ? ( {table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => ( table.getRowModel().rows.map((row) => (
<TableRow key={row.id}> <TableRow key={row.id}>
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => {
<TableCell key={cell.id}> const isActionsColumn = cell.column.id === "actions";
{flexRender( return (
cell.column.columnDef.cell, <TableCell
cell.getContext() key={cell.id}
)} className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
</TableCell> >
))} {flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
);
})}
</TableRow> </TableRow>
)) ))
) : ( ) : (

View File

@@ -1608,23 +1608,27 @@ export default function Page() {
{headerGroup.headers.map( {headerGroup.headers.map(
( (
header header
) => ( ) => {
<TableHead const isActionsColumn = header.column.id === "actions";
key={ return (
header.id <TableHead
} key={
> header.id
{header.isPlaceholder }
? null className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
: flexRender( >
header {header.isPlaceholder
.column ? null
.columnDef : flexRender(
.header, header
header.getContext() .column
)} .columnDef
</TableHead> .header,
) header.getContext()
)}
</TableHead>
);
}
)} )}
</TableRow> </TableRow>
) )
@@ -1647,21 +1651,25 @@ export default function Page() {
.map( .map(
( (
cell cell
) => ( ) => {
<TableCell const isActionsColumn = cell.column.id === "actions";
key={ return (
cell.id <TableCell
} key={
> cell.id
{flexRender( }
cell className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
.column >
.columnDef {flexRender(
.cell, cell
cell.getContext() .column
)} .columnDef
</TableCell> .cell,
) cell.getContext()
)}
</TableCell>
);
}
)} )}
</TableRow> </TableRow>
) )

View File

@@ -552,7 +552,7 @@ export default function ClientsTable({
<div className="flex flex-col items-end gap-1 p-3"> <div className="flex flex-col items-end gap-1 p-3">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-7 w-7 p-0"> <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
<Columns className="h-4 w-4" /> <Columns className="h-4 w-4" />
<span className="sr-only"> <span className="sr-only">
{t("columns") || "Columns"} {t("columns") || "Columns"}

View File

@@ -769,7 +769,7 @@ export default function ResourcesTable({
<div className="flex flex-col items-end gap-1 p-3"> <div className="flex flex-col items-end gap-1 p-3">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-7 w-7 p-0"> <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
<Columns className="h-4 w-4" /> <Columns className="h-4 w-4" />
<span className="sr-only"> <span className="sr-only">
{t("columns") || "Columns"} {t("columns") || "Columns"}

View File

@@ -417,7 +417,7 @@ export function DataTable<TData, TValue>({
<div className="flex flex-col items-end pr-3"> <div className="flex flex-col items-end pr-3">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-7 w-7 p-0 mb-1"> <Button variant="ghost" size="sm" className="h-7 w-7 p-0 mb-1">
<Columns className="h-4 w-4" /> <Columns className="h-4 w-4" />
<span className="sr-only"> <span className="sr-only">
{t("columns") || "Columns"} {t("columns") || "Columns"}