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

View File

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

View File

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

View File

@@ -552,7 +552,7 @@ export default function ClientsTable({
<div className="flex flex-col items-end gap-1 p-3">
<DropdownMenu>
<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" />
<span className="sr-only">
{t("columns") || "Columns"}

View File

@@ -769,7 +769,7 @@ export default function ResourcesTable({
<div className="flex flex-col items-end gap-1 p-3">
<DropdownMenu>
<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" />
<span className="sr-only">
{t("columns") || "Columns"}

View File

@@ -417,7 +417,7 @@ export function DataTable<TData, TValue>({
<div className="flex flex-col items-end pr-3">
<DropdownMenu>
<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" />
<span className="sr-only">
{t("columns") || "Columns"}