Add an accessible resizing option

[nithinrdy]

Fixes #563.

• Created a new atom to store the table.
• Width is updated via setColumnSizing().
• The "Save column sizes for all users?" prompt shows up upon updating the width.

Functioning:

• Adds an option to the column context menu -- "Set Column Width". Option is disabled if resizing is disabled.
• Selecting it opens up a modal with a single number input field, pre-filled with the current width of the column.
• Entering a new value and hitting Update resizes the column as needed.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rowy-os	❌ Failed (Inspect)			Aug 20, 2023 11:06am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
rowy-typedoc	⬜️ Ignored (Inspect)	Visit Preview		Aug 20, 2023 11:06am

[vercel]

@nithinrdy is attempting to deploy a commit to the Rowy Team on Vercel.

A member of the Team first needs to authorize it.

[nithinrdy]

Just wondering -- anything else I'd need to do before/while the PR is in review?

[il3ven]

Thank you for the PR. The PR works but I feel it can be done in a better way.

In its current form, we can't set size through the keyboard because it uses the mouse event. Another point - calling setTableHeaders on every render doesn't feel right.

I propose that we use table.setColumnSizing function to resize. To access table in setColumnWidthModal we can store it in an atom. Let me explain it with code.

Table.tsx

const [reactTable, setReactTable] = useAtom(reactTableAtom, tableScope)
const table = useReactTable({})
useMemo(() => {
  setReactTable(table)
}, [table])

setColumnWidthModal.tsx

export default function SetColumnWidthModal({ close }) {
  const [column] = useAtom(columnMenuAtom, tableScope)
  const [table] = useAtom(reactTableAtom, tableScope)
  const onSubmit = (e) => {
    table.setColumnSizing((old) => {
      return {
        ...old,
        [column.name]: e.target.value
      }
    }
  }
  
  return <></>
}

Having react table in an atom should be useful in the future too. What do you think about this approach?

[nithinrdy]

Hey @il3ven, thanks a lot for taking a look.

I made some changes based on your suggestions, and I agree its much cleaner and it works just as well, and cutting down on unnecessary updates using useMemo is certainly not something I had thought of.

I encountered a small hiccup though, I'd appreciate any ideas. Thanks.

[il3ven]

Thank you for the contribution. The code looks good.