Announcing react-table for Plasmic

zonal_mammal · January 11, 2022, 4:15pm

Hey Everyone,
I have been working on creating a Table utility library to help design production ready tables within Plasmic Studio. It’s built on top of react-table library and aiming to support all of the features it provides.

What’s Done

Custom Styling
Cell level custom component
Column Filtering
a. Support for Custom UI elements ( inputs, select ) can custom sytling
Pagination
a. Support for Custom UI elements for actions like ( goto first, prev, next and last page )
b. Support for Custom UI for Pagination info e.g displaying “Showing 1 of 10” etc
Default table is provided with dummy data to speed up designing. Data and columns can be changed by utilizing columns/data prop.
Features under Development
Sorting
Row Selection
Row level Actions
Bulk Action on selected rows
Finally, an interface to connect it with backend API.
Missing points in the sample video
Columns prop: receives a column configuration through a json. It’s similar api that’s provided by react-table library
Data prop: receives the actual data to be rendered. It’s similar api that’s provided in react-table.
Note:
The package is private at the moment. It will be released once the missing features are done.

I would love to hear your feedback on this and would like you to share your current workflow with designing tables.

How do you design Tables currently and how easy is it to connect with real data?
What’s the most important feature that you find it difficult while developing Tables?
How do you add pagination, filtering and sorting etc?
A sample preview for existing features is attached below. PFA.

Thanks!

chungwu · January 11, 2022, 8:28pm

Wow, truly next level!!

zonal_mammal · January 11, 2022, 9:22pm

Thanks!

still_peacock · January 12, 2022, 10:45am

Now I wish I had a use for a table component

glorious_lynx · April 4, 2022, 5:23pm

Hi @zonal_mammal. I’m actually working on a table for a project right now

zonal_mammal · April 4, 2022, 5:37pm

Hi @glorious_lynx,
Unfortunately, I haven’t completed this library. I didn’t published it back then, because it was a bit complex from user point of view.
It requires some modification as per the new plasmic features to make it more usable.

I will consider that in the upcoming days to see if I can publish a video for react-table library integration with Plasmic. If you have any other preferences for table library let me know so I can consider that maybe.

zonal_mammal · April 4, 2022, 5:38pm

Also, I would like to know your usecase. If it’s achievable through the existing library, I have developed so far. I will let you know and share a video accordingly.

glorious_lynx · April 5, 2022, 5:58am

Thanks for the heads up Asim.
My use case is a medium complexity table, still working on the layout at the moment (see screenshot attached).