Table Plugin improvements

[dylans]

Note: The suggestions here aim to make the table plugin more useful without going down the slippery slope of turning it into a data grid or spreadsheet. :)

Here are some initial thoughts on things we could improve with the Table plugin. This is way too much to achieve at once, but meant to encourage discussion on what features we might want to add to the out of the box Table plugin.

• Selection Current behavior is that a user can highlight multiple cells, but the only actual selection is the last cell. This makes it difficult to copy reliably from the table, or clear the contents of multiple cells (Update, this is mostly a firefox issue)
• Reorder Users cannot currently reorder rows or columns of the table. Consider supporting single and multiple reordering, likely via drag-n-drop
• Sort Users should be able to sort a table by a column, ascending or descending order, if a heading row is provided. Likely via clicking an up/down triangle in the heading cell for that column?
• Headings Current toolbar examples do not have an option to insert a heading row. Perhaps also provide an option to insert a heading row as a default option? Maybe restrict tables to have only one heading row?
• Tall tables Tables that approach the page height could persist the heading as the top row displayed within view, or repeat the display of the heading row periodically Or maybe have a way to freeze 1 or more rows or columns?
• Insert Insert multiple rows or columns when multiple cells are selected?
• Paste Handle multiple cell content pasting into multiple cells?
• colspan and rowspan The option to make a row or column span greater than 1 is supported via code, but not provided to the user via the UI for tables
• context menu Perhaps some of these options would be useful via a context menu
• Border styling Offer users some control over border styles (maybe start with the classic 3 from css: width, color, and style
• Text wrapping Allow users to specify a text-wrapping behavior (I think this is preferred over a min/max width/height, but maybe that is needed for some scenarios. If the latter, perhaps provide that via drag resize?)
• Text direction Likely completely unnecessary, but Google Sheets has a pretty fun text rotation option for text at an angle.
• Content alignment horizontal: Left/right/center/full, and vertical
• Keyboard shortcuts
  • mod+a - select all contents in the table (current behavior is entire page) (add mod+a handler to select all contents of a table #561)
  • tab/shift-tab - prev/next cell (already implemented) (enable tab/shift-tab between table cells #413)
  • mod+enter/shift+mod+enter - add block element after/before table and escape the table (already implemented)
• Formats Perhaps support a mechanism to provide formatting functions for certain data types

[zbeyens]

All ok for me, thanks for the initiative!

Design-wise, I think a good starting point is to list the best table React components to maximize reuse (e.g. for sorting)

Slate-wise, start from https://github.com/lqs469/slate-table

[dylans]

@karthikeyan676 if you're interested in collaborating on this let me know here or feel free to ping me on the slate slack group.

[karthikcodes6]

Thanks @zbeyens

Sure @dylans we have this requirement in our project like notion's database exact same feature we have to build. I'll ping you soon.

[karthikcodes6]

Hi, there are some updates on the table implementation. Initially, I tried the react-table but there were so many things we need to figure out ourselves like keyboard navigation, changing the editor dynamically, etc. And I went to another library called react-data-grid I would say this the best library to fulfil our needs. They have solved so many problems like sorting, filtering, drag-drop rows and columns, etc. But still, they do some breaking changes in releases.

Since this library built to implement the excel feature in react like rendering thousands of rows and columns, there were some caveats as well

1. The row height is not dynamic.
2. Using CSS contain property makes a problem while using the table twice in the same document especially while scrolling. (we can easily override the CSS so, not a problem)
3. When the cell is going out of focus they are removing the elements from the document I guess they are doing this for performance reason.

But we can easily solve those problems by forking the library and customizing as per our needs. But it will definitely save a lot of time and efforts for sure. Let me know your suggestions. And I'm eagerly waiting for the next major release to implement the table in slate-plugins. I have already implemented this in my own project working fine.

[zbeyens]

Great! The prerelease is coming today. As there is multiple ways to implement such features, I propose to create a common slate-plugins-table package usable by all implementations and then one package for each dependency, e.g. slate-plugins-table-data-grid, slate-plugins-table-antd, etc. The same would be applied to features like code block, image, etc.

[karthikcodes6]

Awesome!