<Table.RecordModal />

Table.RecordModal is a component for displaying an insert or update form for a database table. It works directly with the createTableRpc settings and must always be used within a Table component.

<Table>
    // Should always be inside Table component
    <Table.RecordModal />
</Table>

Fields

The fields prop lets you customize the form fields displayed in the insert and update forms.

By default, you don't need to manually define form fields — they are automatically created based on your database schema and createTableRpc settings.

However, we recommend explicitly defining the fields prop to avoid unnecessary fields and make future maintenance easier.

<Table>
    <Table.RecordModal
        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' },
        ]}
    />
</Table>

Each field is an object with the following properties:

• column: The name of the column in the table.

• label (optional): The label displayed to users for this field. Defaults to the column name if not provided.

• formField: Specifies the type of form field to use for this column

• required (optional): If true, this field must be filled out in form.

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. javascript Copy code

{
    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',
    
    /** Linked settings in createTableRpc are automatically applied, 
        no need to specify tables and columns here */
}

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) => void;
}

Example

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