Skip to content
search icon
clear
Component Status

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Table components needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the relevant grouping.
  3. Once the component needed is located, click and drag it into the frame/artboard.

How to use

  1. Place the Table header components needed on the frame/artboard.
  2. Select a Table header in the frame/artboard.
  3. Locate and expand the highlighted layer in the Layers Panel.
  4. Edit the text label.
  5. In the Layers panel show the unit and/or placeholder icon as needed and adjust the unit text. Drag and drop an icon from the assets panel directly into the placeholder icon using:
  • Mac: Command + Option
  • PC: Ctrl + ALT
  1. If you have multiple lines text in a cell, adjust the height with 20 pixels per additional lines. See example in Figma

  2. Adjust the width of the header to fit the column width of the cells below, where the minimum width is defined by the right spacing.

Now you can either use Auto layout or Constraints.

How to use auto layout

Auto layout enables easy reuse of the table, with the options to easily resize the width, change the order of the columns, show/hide columns and edit the contents.

  1. Select all the cells and the header cell in one column and create a frame.
  2. Add auto layout to the frame.
  3. Make sure to name the column frame in the Layers Panel.
  4. Locate the Design tab in the Inspector Panel. For each of the cells within a column frame select ´Stretch Left & Right´ at the top of the tab.
  5. Repeat step 1 to 4 for all the columns.
  6. Select all the column frames and add auto layout.
  7. When editing text in the cells, adjust the width of the frame to fit to contents. The other columns will move accordingly.

How to use constraints

Select all the Table header layers and convert them to a frame/artboard by using the following shortcut:

  • Mac: Command + Option + G
  • PC: Ctrl + ALT + G
  1. Make sure to name the new group.
  2. Locate the Design tab in the Inspector Panel.
  3. Under the Constraints section, set up constraints.
  4. Repeat this process for each row that is needed in the table.
  5. Once the header and all the rows have been added, select all the groupings and convert them to a frame/artboard by using the following shortcut:
  • Mac: Command + Option + G
  • PC: Ctrl + ALT + G
  1. Make sure to name the new group.
  2. Locate the Design tab in the Inspector Panel.
  3. Under the Constraints section, set up constraints.

API

Table

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenNodetrue-@ignore

Head

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenNodetrue-@ignore

Body

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenNodetrue-@ignore

Row

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenNodetrue-@ignore

Cell

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
asEnum
'td' │ 'th'
falsetdSpecifies which td or th to use
variantEnum
'text' │ 'icon' │ 'numeric' │ 'input'
falsetextSpecifies which variant to use
childrenNodetrue-@ignore
Edit this page on GitHub