jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

make dataOutputComponent column width fit the contents

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-17 23:34:00 -03:00
commit 725a7a95a9
2 changed files with 11 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/frontend/src/components/dataOutputComponent/index.tsx
View file

@ -19,12 +19,17 @@ function DataOutputComponent({
const columnDefs = columns.map((col, idx) => ({ const columnDefs = columns.map((col, idx) => ({
...col, ...col,
resizable: idx !== columns.length - 1, resizable: true,
flex: idx !== columns.length - 1 ? 1 : 2, maxWidth: 400,
})) as (ColDef<any> | ColGroupDef<any>)[]; })) as (ColDef<any> | ColGroupDef<any>)[];
return ( return (
<TableComponent <TableComponent
gridOptions={{
autoSizeStrategy: {
type: "fitCellContents",
},
}}
key={"dataOutputComponent"} key={"dataOutputComponent"}
overlayNoRowsTemplate="No data available" overlayNoRowsTemplate="No data available"
suppressRowClickSelection={true} suppressRowClickSelection={true}

20
src/frontend/src/components/tableComponent/index.tsx
View file

@ -13,6 +13,7 @@ import ForwardedIconComponent from "../genericIconComponent";
import { Alert, AlertDescription, AlertTitle } from "../ui/alert"; import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
import TableOptions from "./components/TableOptions"; import TableOptions from "./components/TableOptions";
import resetGrid from "./utils/reset-grid-columns"; import resetGrid from "./utils/reset-grid-columns";
import cloneDeep from "lodash-es";
interface TableComponentProps extends AgGridReactProps { interface TableComponentProps extends AgGridReactProps {
columnDefs: NonNullable<AgGridReactProps["columnDefs"]>; columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
@ -41,12 +42,6 @@ const TableComponent = forwardRef<
let newCol = { let newCol = {
...col, ...col,
}; };
if (index === props.columnDefs.length - 1) {
newCol = {
...newCol,
resizable: false,
};
}
if (props.onSelectionChanged && index === 0) { if (props.onSelectionChanged && index === 0) {
newCol = { newCol = {
...newCol, ...newCol,
@ -76,17 +71,11 @@ const TableComponent = forwardRef<
const initialColumnDefs = useRef(colDef); const initialColumnDefs = useRef(colDef);
const [columnStateChange, setColumnStateChange] = useState(false); const [columnStateChange, setColumnStateChange] = useState(false);
const storeReference = props.columnDefs.map((e) => e.headerName).join("_"); const storeReference = props.columnDefs.map((e) => e.headerName).join("_");
const makeLastColumnNonResizable = (columnDefs) => {
columnDefs.forEach((colDef, index) => {
colDef.resizable = index !== columnDefs.length - 1;
});
return columnDefs;
};
const onGridReady = (params) => { const onGridReady = (params) => {
// @ts-ignore // @ts-ignore
realRef.current = params; realRef.current = params;
const updatedColumnDefs = makeLastColumnNonResizable([...colDef]); const updatedColumnDefs = [...colDef];
params.api.setGridOption("columnDefs", updatedColumnDefs); params.api.setGridOption("columnDefs", updatedColumnDefs);
const customInit = localStorage.getItem(storeReference); const customInit = localStorage.getItem(storeReference);
initialColumnDefs.current = params.api.getColumnDefs(); initialColumnDefs.current = params.api.getColumnDefs();
@ -109,9 +98,7 @@ const TableComponent = forwardRef<
if (props.onGridReady) props.onGridReady(params); if (props.onGridReady) props.onGridReady(params);
}; };
const onColumnMoved = (params) => { const onColumnMoved = (params) => {
const updatedColumnDefs = makeLastColumnNonResizable( const updatedColumnDefs = cloneDeep(params.columnApi.getAllGridColumns().map((col) => col.getColDef()));
params.columnApi.getAllGridColumns().map((col) => col.getColDef()),
);
params.api.setGridOption("columnDefs", updatedColumnDefs); params.api.setGridOption("columnDefs", updatedColumnDefs);
if (props.onColumnMoved) props.onColumnMoved(params); if (props.onColumnMoved) props.onColumnMoved(params);
}; };
@ -178,3 +165,4 @@ const TableComponent = forwardRef<
); );
export default TableComponent; export default TableComponent;