How to prototype tables with fixed columns on edges and horizontal scroll on the mid section?

To make it work you need to lay it out the same way as a real table. In fact, it’s like combining three tables into one.

Here is a live demo → https://www.figma.com/proto/Xr4i7pLNJNxCGNMGj0yi9U/Table-Pinned-Columns?node-id=0-1&viewport=289%2C118%2C0.46&t=RCCxWL8xXBJ2CUmW-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=1%3A1011

1. Create a first column component
2. Create a main table component with 20 columns (or the number of columns you need). To make the table easier to set up, you can add a view/hide property. You must apply this to all components.
3. Create a last column component with variants (row settings, empty, etc.)
4. Auto layout the elements with 0 spacing
5. put the main table component inside a frame. Apply clip content. Set prototype behavior to horizontal scroll
6. Because you have an auto layout and a frame in between, your table will behave as responsive.
7. Be sad that Figma does not have a table tool
8. Get ready for some dev backlash, as coding that table requires some dev tricks (yup, it’s doable and works well on different browsers, but it may require a dev who knows their craft).

You will get what @Pavel_Kiselev posted above if you follow the steps. → Great table example there.

Hey @Pavel_Kiselev,Thanks for the demo.

Could you share me the shadows value for the left and right (sticky) columns, or the design file ? My sticky columns is looking a bit off due to the effects of shadows.