If one of the 30+ field types don’t support your data type or you want to provide an alternate UI to edit your data, you can add a field type by writing your own code.
Step 1: Declare a new field type and set up config
Add a new entry to the
src/constants/fields.ts. The all-caps SNAKE_CASE name will be the internal name used in the table config to identify this field type.
Set up the code for the new field type in
Clone one of the existing field directories. Make sure to update
Create an empty directory. In that directory, create an
index.tsfile that default exports the constant
configand implements the interface
Step 2: Add
This component is displayed in each cell for this field type.
Choose which kind of
TableCellis best suited for your field type. The Basic Cell is always rendered when the table is scrolled, and must always be provided.
- Basic Cell: You only need the cell’s value, field type, or column name to render the cell and require few dependencies. The component is light enough that it does not affect scroll performance.
- Heavy Cell: You need to access more props (such as the column’s configuration or the entire row’s data) or your component is “heavy” to render or has lots of dependencies (such as a color picker).
- Popover Cell: You display an inline editor that is a popup (like the Single Select or Color field types) or your editor component is very heavy that it should only be rendered once, when the user clicks the cell.
Use the corresponding higher-order component to implement your cell. See
Optionally, use one of the common
BasicCellNamedisplays the column name.
BasicCellValuedisplays the cell’s raw value.
When writing components to pass to one of the higher-order components, make sure they implement the correct interfaces.
Step 3: Add
This component is displayed when the user double-clicks the table cell for this field type.
Choose which kind of
TableEditor is best suited for your field type. Import
TextEditor: Inline text editor.
withSideDrawerEditor: Opens the
SideDrawer, keeping the inline table cell read-only.
NullEditor: No editor. Best for cells that can be edited inline with a click, such as Popover cells.
Step 4: Add
This component is displayed in the
SideDrawer for this field type. Visually,
it is a form field.
It must implement
Step 5: Export the field config
When you’re ready to test your new field type, export the code and field config.
Import the field code directory in
Export the config as part of the
Create a new column in a table with your new field type.