Merge pull request #1368 from nithinrdy/nithin/accessible-resizing

Add an accessible resizing option

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<ColumnConfig[]>((get) => {
     ["desc", "asc"]
   );
 });
+/** Store the table */
+export const reactTableAtom = atom<Table<TableRow> | null>(null);
 /** Reducer function to convert from array of columns to columns object */
 export const tableColumnsReducer = (
   a: Record<string, ColumnConfig>,

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 });

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";
@@ -265,6 +266,16 @@ export default function ColumnMenu({
           : column.type
       ),
     },
+    {
+      key: "setColumnWidth",
+      label: "Set Column Width",
+      icon: <StraightenIcon />,
+      onClick: () => {
+        openColumnModal({ type: "setColumnWidth", columnKey: column.key });
+        handleClose();
+      },
+      disabled: column.resizable === false,
+    },
   ];
 
   const configActions: IMenuContentsProps["menuItems"] = [

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 <ColumnConfigModal onClose={onClose} column={column} />;
 
+  if (columnModal.type === "setColumnWidth")
+    return <SetColumnWidthModal onClose={onClose} column={column} />;
+
   return null;
 }

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<number>(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 (
+    <Modal
+      onClose={onClose}
+      title="Set Column Width"
+      maxWidth="xs"
+      children={
+        <form
+          id="column-width-modal"
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleUpdate();
+          }}
+        >
+          <TextField
+            value={newWidth}
+            autoFocus
+            variant="filled"
+            id="name"
+            label="Width"
+            type="number"
+            fullWidth
+            onChange={(e) => setWidth(Number(e.target.value))}
+          />
+        </form>
+      }
+      actions={{
+        primary: {
+          children: "Update",
+          type: "submit",
+          form: "column-width-modal",
+        },
+        secondary: {
+          onClick: onClose,
+          children: "Cancel",
+        },
+      }}
+    />
+  );
+}

src/components/Table/Table.tsx

@@ -26,6 +26,7 @@ import EmptyState from "@src/components/EmptyState";
 import {
   tableScope,
   tableSchemaAtom,
+  reactTableAtom,
   tableColumnsOrderedAtom,
   tableRowsAtom,
   tableNextPageAtom,
@@ -118,6 +119,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);
 
@@ -264,6 +266,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();