Tables

Tables allows users to view and manage data in a database.

This is how typical page with table looks like:

import { Page, usePage } from '@kottster/react'; 
import { Table } from '@kottster/react';
import { app } from '@/.server/app';
import dataSource from '@/.server/data-sources/${dataSource.type}';

// Set up table RPC settings and export as a Remix action.
// This automatically generates an API on the server.
export const action = 
  app.createTableRpc(dataSource, {
    table: 'users',
    primaryKeyColumn: 'id',
    select: {
      pageSize: 15,  
      columns: ['id', 'first_name', 'last_name', 'email', 'birth_date'],
      excludeColumns: [],
      searchableColumns: ['first_name', 'last_name'],
      sortableColumns: ['created_at'],
    },
    insert: true,
    update: true,
    delete: true
  });
  

export default () => {
  const { navItem } = usePage();
  
  return (
    <Page title={navItem.name}>
      {/* Return the Table component. It will know what columns and 
          actions to show based on createTableRpc settings. */}
      <Table>
          {/* Inside, return the Table.RecordModal component if you have 
              insert or update enabled in createTableRpc settings. */}
          <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>
    </Page>
  );
};

Key components

• createTableRpc

• <Table />

• <Table.RecordModal />