Table component

The <Table/> component displays a dynamic table for viewing and managing data from a database. It includes features like search, sorting, filtering, and a record modal for inserting or updating records.

This component is closely integrated with the createTableRpc settings, which control both API and table functionality. Key features enabled by these settings include:

• Visible Columns: select.columns specifies which columns to display.

• Excluded Columns: select.excludeColumns determines which columns to hide.

• Searchable Columns: select.searchableColumns adds a search field at the top of the table.

• Filterable Columns: select.filterableColumns enables filters at the top of the table.

• Sortable Columns: select.sortableColumns allows sorting specific columns.

• Pagination: select.pageSize controls the number of records displayed per page.

Columns

The columns prop lets you specify the columns displayed in the table.

By default, columns are automatically generated based on your database schema and createTableRpc settings. However, we recommend defining the columns prop explicitly. This helps you avoid displaying unnecessary fields and makes the table easier to maintain in the future.

Here’s an example of a Table component with defined columns:

Example

<Table>
   columns={[
      { label: 'ID', column: 'id' },
      { label: 'Email address', column: 'email' },
      { label: 'Name', column: 'first_name' },
   ]}   
/>

Parameters

Each column is defined as an object with the following parameters:

column

string

The name of the column in the database table.

label

string, optional

The text displayed in the table header for this column. If not provided, the value from column will be used as the default.

width

number, optional

The width of the column in pixels. If not specified, the column will adjust to fit its content.

render

function, optional

A custom function used to render content in the table cells. It receives the record data as an argument.

Example #1

{
    label: 'Full name',
    column: 'full_name',
    render: (record) => `${record.firstName} ${record.lastName}`   
}

Example #2

{
    label: 'Email',
    column: 'email',
    render: (record) => (
        <a href={`mailto:${record.email}`}>{record.email}</a>
    )
}

linked

string, optional

Specifies a particular relation from linked within createTableRpc.

Learn more: Linked records (Joins)