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
, optionalThe title displayed at the top of the page. If not provided, the nav item label will be used as the default.
-
columns
TableColumn[]
, optionalLearn more: Columns
-
columnTransformer
(columns: TableColumn[]) => TableColumn[]
, optionalA custom function used to transform the automatically determined columns before rendering.
Example: Adding custom label to the email columncolumnTransformer: columns => (
columns.map(column => {
if (column.column === 'email') {
return { ...column, label: 'Email address' };
}
return column;
})
) -
columnOverrides
Record<string, TableColumn>
, optionalA custom object used to override the automatically determined columns before rendering.
Example: Define configuration for the email columncolumnOverrides: {
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[]
, optionalLearn more: Form Fields
-
fieldTransformer
(fields: FormField[]) => FormField[]
, optionalA custom function used to transform the automatically determined form fields before rendering.
Example: Change the field type to 'textarea' for the description fieldfieldTransformer: fields => (
fields.map(field => {
if (field.column === 'description') {
return { ...field, type: 'textarea' };
}
return field;
})
) -
fieldOverrides
Record<string, FormField>
, optionalA custom object used to override the automatically determined form fields before rendering.
Example: Define configuration for the description fieldfieldOverrides: {
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
, optionalThe text displayed in the table header for this column. If not provided, the value from column will be used as the default.
-
width
number
, optionalThe width of the column in pixels. If not specified, the column will adjust to fit its content.
-
render
function
, optionalA 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
, optionalSpecifies 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
}
{
type: 'custom',
renderComponent: (value, onChange) => (
<MyCustomInput value={value} onChange={onChange} />
),
}