Fixed resizability of last column

This commit is contained in:
Lucas Oliveira 2024-05-06 18:33:13 +01:00
commit f661edb5bc
2 changed files with 27 additions and 29 deletions

View file

@ -5,7 +5,6 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
import { useDarkStore } from "../../stores/darkStore"; import { useDarkStore } from "../../stores/darkStore";
import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
import { cn } from "../../utils/utils"; import { cn } from "../../utils/utils";
import { Card, CardContent } from "../ui/card";
const TableComponent = forwardRef< const TableComponent = forwardRef<
ElementRef<typeof AgGridReact>, ElementRef<typeof AgGridReact>,
@ -14,23 +13,13 @@ const TableComponent = forwardRef<
const dark = useDarkStore((state) => state.dark); const dark = useDarkStore((state) => state.dark);
return ( return (
<div className="flex h-full flex-col"> <div
<div className={cn(
className={cn( dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz", "ag-theme-shadcn flex h-full min-h-2 flex-col",
"ag-theme-shadcn flex h-full flex-col", )} // applying the grid theme
)} // applying the grid theme >
> <AgGridReact ref={ref} {...props} />
<Card x-chunk="dashboard-04-chunk-2" className="pt-4">
<CardContent>
<AgGridReact
overlayNoRowsTemplate="No data available"
ref={ref}
{...props}
/>
</CardContent>
</Card>
</div>
</div> </div>
); );
}); });

View file

@ -8,6 +8,7 @@ import Dropdown from "../../../../components/dropdownComponent";
import ForwardedIconComponent from "../../../../components/genericIconComponent"; import ForwardedIconComponent from "../../../../components/genericIconComponent";
import TableComponent from "../../../../components/tableComponent"; import TableComponent from "../../../../components/tableComponent";
import { Badge } from "../../../../components/ui/badge"; import { Badge } from "../../../../components/ui/badge";
import { Card, CardContent } from "../../../../components/ui/card";
import { deleteGlobalVariable } from "../../../../controllers/API"; import { deleteGlobalVariable } from "../../../../controllers/API";
import useAlertStore from "../../../../stores/alertStore"; import useAlertStore from "../../../../stores/alertStore";
import { useGlobalVariablesStore } from "../../../../stores/globalVariables"; import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
@ -104,6 +105,7 @@ export default function GlobalVariablesPage() {
field: "default_fields", field: "default_fields",
flex: 1, flex: 1,
editable: false, editable: false,
resizable: false,
}, },
]); ]);
@ -168,17 +170,24 @@ export default function GlobalVariablesPage() {
</div> </div>
<div className="flex h-full w-full flex-col justify-between pb-8"> <div className="flex h-full w-full flex-col justify-between pb-8">
<TableComponent <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
onSelectionChanged={(event: SelectionChangedEvent) => { <CardContent className="h-full">
setSelectedRows(event.api.getSelectedRows().map((row) => row.name)); <TableComponent
}} overlayNoRowsTemplate="No data available"
rowSelection="multiple" onSelectionChanged={(event: SelectionChangedEvent) => {
suppressRowClickSelection={true} setSelectedRows(
domLayout="autoHeight" event.api.getSelectedRows().map((row) => row.name),
pagination={false} );
columnDefs={colDefs} }}
rowData={rowData} rowSelection="multiple"
/> suppressRowClickSelection={true}
domLayout="autoHeight"
pagination={true}
columnDefs={colDefs}
rowData={rowData}
/>
</CardContent>
</Card>
</div> </div>
</div> </div>
); );