TablePage component

The TablePage 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 defineTableController 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
• Linked Records: select.linked enables joining related tables.

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 defineTableController 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 columns prop with defined columns:

<TablePage
   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 related tables to join and display in the table.

  Learn more: Linked records (Joins)

Form

Learn more about the form property and its fields on the TablePage form page.