diff --git a/src/atoms/tableScope/table.ts b/src/atoms/tableScope/table.ts index f8d519c48..a95995a04 100644 --- a/src/atoms/tableScope/table.ts +++ b/src/atoms/tableScope/table.ts @@ -16,6 +16,7 @@ import { BulkWriteFunction, } from "@src/types/table"; import { updateRowData } from "@src/utils/table"; +import { Table } from "@tanstack/react-table"; /** Root atom from which others are derived */ export const tableIdAtom = atom(""); @@ -47,6 +48,8 @@ export const tableColumnsOrderedAtom = atom((get) => { ["desc", "asc"] ); }); +/** Store the table */ +export const reactTableAtom = atom | null>(null); /** Reducer function to convert from array of columns to columns object */ export const tableColumnsReducer = ( a: Record, diff --git a/src/atoms/tableScope/ui.ts b/src/atoms/tableScope/ui.ts index b170d2502..b56397907 100644 --- a/src/atoms/tableScope/ui.ts +++ b/src/atoms/tableScope/ui.ts @@ -41,7 +41,7 @@ export const columnMenuAtom = atom<{ * ``` */ export const columnModalAtom = atomWithHash<{ - type: "new" | "name" | "type" | "config"; + type: "new" | "name" | "type" | "config" | "setColumnWidth"; columnKey?: string; index?: number; } | null>("columnModal", null, { replaceState: true }); diff --git a/src/components/ColumnMenu/ColumnMenu.tsx b/src/components/ColumnMenu/ColumnMenu.tsx index b19447038..d676f0248 100644 --- a/src/components/ColumnMenu/ColumnMenu.tsx +++ b/src/components/ColumnMenu/ColumnMenu.tsx @@ -24,6 +24,7 @@ import { } from "@src/assets/icons"; import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward"; import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward"; +import StraightenIcon from "@mui/icons-material/Straighten"; import EditIcon from "@mui/icons-material/EditOutlined"; import SettingsIcon from "@mui/icons-material/SettingsOutlined"; import EvalIcon from "@mui/icons-material/PlayCircleOutline"; @@ -263,6 +264,16 @@ export default function ColumnMenu({ : column.type ), }, + { + key: "setColumnWidth", + label: "Set Column Width", + icon: , + onClick: () => { + openColumnModal({ type: "setColumnWidth", columnKey: column.key }); + handleClose(); + }, + disabled: column.resizable === false, + }, ]; const configActions: IMenuContentsProps["menuItems"] = [ diff --git a/src/components/ColumnModals/ColumnModals.tsx b/src/components/ColumnModals/ColumnModals.tsx index 2dd37f208..99429f4ce 100644 --- a/src/components/ColumnModals/ColumnModals.tsx +++ b/src/components/ColumnModals/ColumnModals.tsx @@ -5,6 +5,7 @@ import NewColumnModal from "./NewColumnModal"; import NameChangeModal from "./NameChangeModal"; import TypeChangeModal from "./TypeChangeModal"; import ColumnConfigModal from "./ColumnConfigModal"; +import SetColumnWidthModal from "./SetColumnWidthModal"; import { tableScope, @@ -40,5 +41,8 @@ export default function ColumnModals() { if (columnModal.type === "config") return ; + if (columnModal.type === "setColumnWidth") + return ; + return null; } diff --git a/src/components/ColumnModals/SetColumnWidthModal.tsx b/src/components/ColumnModals/SetColumnWidthModal.tsx new file mode 100644 index 000000000..a5071d64a --- /dev/null +++ b/src/components/ColumnModals/SetColumnWidthModal.tsx @@ -0,0 +1,70 @@ +import { useEffect, useState } from "react"; +import { IColumnModalProps } from "."; +import { reactTableAtom } from "@src/atoms/tableScope"; +import { tableScope } from "@src/atoms/tableScope"; +import { useAtom } from "jotai"; + +import { TextField } from "@mui/material"; +import Modal from "@src/components/Modal"; + +export default function SetColumnWidthModal({ + onClose, + column, +}: IColumnModalProps) { + const [reactTable] = useAtom(reactTableAtom, tableScope); + const [newWidth, setWidth] = useState(0); + + useEffect(() => { + // Set the initial width to the current column width once the table is fetched. + setWidth(reactTable?.getAllColumns()[column.index].getSize() || 0); + }, [reactTable, column]); + + const handleUpdate = () => { + reactTable?.setColumnSizing((old) => { + const newSizing = { ...old }; + // Set the new width for the column. + newSizing[column.fieldName] = newWidth; + return newSizing; + }); + onClose(); + }; + + return ( + { + e.preventDefault(); + handleUpdate(); + }} + > + setWidth(Number(e.target.value))} + /> + + } + actions={{ + primary: { + children: "Update", + type: "submit", + form: "column-width-modal", + }, + secondary: { + onClick: onClose, + children: "Cancel", + }, + }} + /> + ); +} diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 892eabf9f..a7e008717 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -25,6 +25,7 @@ import EmptyState from "@src/components/EmptyState"; import { tableScope, tableSchemaAtom, + reactTableAtom, tableColumnsOrderedAtom, tableRowsAtom, tableNextPageAtom, @@ -99,6 +100,7 @@ export default function Table({ const [tableRows] = useAtom(tableRowsAtom, tableScope); const [tableNextPage] = useAtom(tableNextPageAtom, tableScope); const [tablePage, setTablePage] = useAtom(tablePageAtom, tableScope); + const setReactTable = useSetAtom(reactTableAtom, tableScope); const updateColumn = useSetAtom(updateColumnAtom, tableScope); @@ -185,6 +187,10 @@ export default function Table({ state: { ...prev.state, columnVisibility, columnPinning, columnSizing }, onColumnSizingChange: setColumnSizing, })); + // Update the reactTable atom when table state changes. + useMemo(() => { + setReactTable(table); + }, [table, setReactTable]); // Get rows and columns for virtualization const { rows } = table.getRowModel(); const leafColumns = table.getVisibleLeafColumns();