Skip to main content

I want to achieve prototype for this kind of table where there is a fixed column on the left or right or both. This is used by ANT Design & Airtable as well.

ANT Design Fixed Column

How do we achieve this stick one/ multi columns and scroll rest horizontally?

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.