Skip to main content

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.

The component is tightly connected to the defineTableController settings, which manage both API interactions and table behavior. If you want extra control over how the main table looks or works on the client side, you need to use the TablePage component.

Properties

  • title

    string, optional

    The title displayed at the top of the page. If not provided, the nav item label will be used as the default.

  • columns

    TableColumn[], optional

    Learn more: Columns

  • columnTransformer

    (columns: TableColumn[]) => TableColumn[], optional

    A custom function used to transform the automatically determined columns before rendering.

    Example: Adding custom label to the email column
    columnTransformer: columns => (
    columns.map(column => {
    if (column.column === 'email') {
    return { ...column, label: 'Email address' };
    }

    return column;
    })
    )
  • columnOverrides

    Record<string, TableColumn>, optional

    A custom object used to override the automatically determined columns before rendering.

    Example: Define configuration for the email column
    columnOverrides: {
    email: {
    column: 'email',
    label: 'Email address'
    }
    }
  • form

    Contains the configuration for the form for viewing, inserting, and updating records.

    • width

      The width of the form (in pixels).

    • fields

      FormField[], optional

      Learn more: Form Fields

    • fieldTransformer

      (fields: FormField[]) => FormField[], optional

      A custom function used to transform the automatically determined form fields before rendering.

      Example: Change the field type to 'textarea' for the description field
      fieldTransformer: fields => (
      fields.map(field => {
      if (field.column === 'description') {
      return { ...field, type: 'textarea' };
      }

      return field;
      })
      )
    • fieldOverrides

      Record<string, FormField>, optional

      A custom object used to override the automatically determined form fields before rendering.

      Example: Define configuration for the description field
      fieldOverrides: {
      description: {
      column: 'description',
      type: 'textarea'
      }
      }
  • headerRightSection

    A custom component displayed on the right side of the page header.

  • headerBottomSection

    A custom component displayed below the page header.

Columns

By default, columns are automatically generated based on your database schema and defineTableController settings. But you can also define the columns explicitly using the columns prop.

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>
    )
    }
  • linkedKey

    string, optional

    Specifies the linked relation key for the column. This is required when you want to display linked records in the table.

    Learn more: Linked records (Joins)

Form Fields

By default, form fields are automatically generated based on your database schema and defineTableController settings. But you can also define the form fields explicitly using the form.fields prop.

Here’s an example of the fields parameter with defined fields:

<PageTable
columns={/* ... */}
form={{
fields: [
{ label: 'First name', column: 'first_name', type: 'input' },
{ label: 'Last name', column: 'last_name', type: 'input' },
{ label: 'Email', column: 'email', type: 'input' },
{ label: 'Birth date', column: 'birth_date', type: 'datePicker' },
]
}}
/>

Each field is an object with the following options:

  • column (string): The name of the column in the table.
  • label (string, optional): The label displayed to users for this field. Defaults to the column name if not provided.
  • formField (string, optional): Specifies the type of form field to use for this column
  • required (boolean, optional): If true, this field must be filled out in form.
  • span (number, optional): Sets how wide the field should be in a 12-column layout. You can choose a value from 1 to 12, where 1 is the narrowest and 12 takes up the full width. The default is 12.

Basic field types

The type property defines the field type and supports additional properties depending on the type.

Below is a list of supported formFields types and their interfaces:

  • input

    A single-line text input.

    {
    type: 'input'
    }
  • numberInput

    A number-only input field.

    {
    type: 'numberInput',

    /** Determines whether decimal values are allowed, true by default */
    allowDecimal?: boolean;
    }
  • textarea

    A multi-line text input.

    {
    type: 'textarea'
    }
  • select

    A searchable dropdown menu.

    {
    type: 'select',

    /** List of selectable options */
    options: {
    /** Display label for the option */
    label: string;

    /** Value associated with the option */
    value: string;
    }[]
    }
  • checkbox

    A checkbox for boolean input.

    {
    type: 'checkbox'
    }
  • datePicker

    An inline date (datetime) picker.

    {
    type: 'datePicker',

    /** Adds time picker */
    withTime: boolean,

    /** Adds seconds input to time picker */
    timeWithSeconds: boolean
    }
  • timePicker

    An inline time picker.

    {
    type: 'timePicker',

    /** Adds seconds input */
    withSeconds: boolean;
    }
  • recordSelect

    Select records from another table.

    Requires a one-to-one relationship to be configured (see one-to-one linked).

    {
    type: 'recordSelect',

    /** The linked relation key */
    linkedKey?: string;
    }

Custom field

Use a custom React component for input.

{
type: 'custom',

/** Function to render a custom React component */
renderComponent: (
value: any,
onChange: (value: any) => void,
params?: {
hasError: boolean;
readOnly: boolean;
}
) => any
}
Example
{
type: 'custom',

renderComponent: (value, onChange) => (
<MyCustomInput value={value} onChange={onChange} />
),
}