DataTb Component

← Back to Documentation

The DataTb component provides a powerful, flexible way to display tabular data from various sources with built-in sorting, filtering, and pagination. Built on React and TanStack Table.

Live Examples

Minimal example

Load data from a CSV file with automatic column detection:

1
<DataTb
2
  csv="/data/ksa.csv"
3
  searchable
4
  pagination
5
  client:load
6
/>

Loading data...

CSV with Custom Columns

Same data with customized column display and formatting:

1
<DataTb
2
  csv="/data/ksa.csv"
3
  columns={[
4
    { key: 'Item_Label', header: 'Site ID', sortable: true },
5
    { key: 'Name', header: 'Name', sortable: true },
6
    { key: 'Site_Name', header: 'Site Name' },
7
    { key: 'Survey_Year', header: 'Survey Year', format: 'number' },
8
    { key: 'Subregion', header: 'Subregion' }
9
  ]}
10
  searchable
11
  pagination={{ pageSize: 5, showPageSize: true }}
12
  initialSort={{ columnKey: 'Item_Label', direction: 'asc' }}
13
  client:load
14
/>

Loading data...

Inline JSON Data

Display data directly from JSON:

1
export const jsonData = [
2
  { language: 'JavaScript', year: 1995, creator: 'Brendan Eich' },
3
  { language: 'Python', year: 1991, creator: 'Guido van Rossum' },
4
  { language: 'Java', year: 1995, creator: 'James Gosling' },
5
  { language: 'TypeScript', year: 2012, creator: 'Anders Hejlsberg' },
6
  { language: 'Rust', year: 2010, creator: 'Graydon Hoare' }
7
];
8

9
<DataTb
10
  json={jsonData}
11
  searchable
12
  pagination={false}
13
  client:load
14
/>

Loading data...

API with Transformer

Fetch data from a public API and transform it:

1
<DataTb
2
  api="https://jsonplaceholder.typicode.com/todos"
3
  columns={[
4
    { key: 'title', header: 'Title', sortable: true },
5
    { key: 'userId', header: 'User ID' },
6
    { key: 'completed', header: 'Status', labels: { 'true': '✅ Done', 'false': '⏳ Pending' } }
7
  ]}
8
  searchable
9
  pagination={{ pageSize: 10 }}
10
  client:load
11
/>

Loading data...

Directus Integration

Load data from a Directus collection using the simplified interface.

Note: This example requires PUBLIC_DIRECTUS_URL and PUBLIC_DIRECTUS_TOKEN environment variables in your .env file

1
<DataTb
2
  directus={{
3
    table: "scms_ksa",
4
    queryString: "limit=-1&offset=0",
5
  }}
6
  searchable
7
  pagination
8
  client:load
9
/>

Loading data...

Complex Transformations (The Wrapper Pattern)

Question: “Can I use functions for complex transformations?”

Answer: Not directly inside MDX props (due to serialization limits), but YES by using a Wrapper Component.

Create a React component (AdvancedTable.tsx) that defines your columns with functions, and import it here.

1
export default function AdvancedTable() {
2
  const columns = [
3
    {
4
      key: 'priority',
5
      render: (val) => <span className={...}>{val}</span>
6
    },
7
    {
8
      key: 'action',
9
      render: (_, row) => <button onClick={() => alert(row.title)}>Click Me</button>
10
    }
11
  ];
12
  return <DataTb columns={columns} ... />
13
}

1
// YourPage.mdx
2
import AdvancedTable from '@components/AdvancedTable';
3

4
<AdvancedTable client:load />

Loading data...

Props API

DataTbProps

Prop	Type	Default	Description
`csv`	`string`	—	URL to a CSV file
`json`	`any[] \| string`	—	Inline array or URL to JSON
`api`	`string`	—	API endpoint URL (returns array)
`directus`	`DirectusShorthand`	—	Directus collection shorthand
`source`	`SourceConfig`	—	Advanced source configuration
`columns`	`ColumnConfig[]`	auto-detected	Column definitions
`searchable`	`boolean`	`false`	Show global search box
`pagination`	`boolean \| PaginationConfig`	`false`	Enable pagination
`sortable`	`boolean`	`true`	Enable column sorting
`initialSort`	`{ columnKey, direction }`	—	Default sort state
`truncateContent`	`boolean`	`true`	Truncate long cell values
`truncateMaxWidth`	`string`	`'20rem'`	CSS max-width for truncated cells
`contentSize`	`'sm' \| 'md'`	`'sm'`	Table body font size
`loadingMessage`	`string`	—	Custom loading text
`emptyMessage`	`string`	—	Custom empty-state text
`errorMessage`	`string`	—	Custom error text

ColumnConfig

1
interface ColumnConfig {
2
  key: string;               // Data property key
3
  header: string;            // Display header
4
  sortable?: boolean;
5
  format?: 'date' | 'number' | 'currency' | 'percent';
6
  labels?: Record<string, string>;   // Value mapping, e.g. { "true": "Yes" }
7
  width?: string;            // CSS width
8
  render?: (value: any, row: DataRow) => React.ReactNode;
9
}

PaginationConfig

1
interface PaginationConfig {
2
  pageSize?: number;         // Default: 10
3
  showPageSize?: boolean;    // Show page-size selector
4
  pageSizeOptions?: number[];
5
}

SourceConfig (advanced)

1
type SourceConfig =
2
  | { type: 'csv';  url: string; delimiter?: string; skipRows?: number; }
3
  | { type: 'json'; data?: any[]; url?: string; }
4
  | { type: 'api';  url: string; method?: 'GET'|'POST'; headers?: Record<string,string>; transformer?: (data: any) => any[]; }
5
  | { type: 'directus'; config: { url: string; token: string; }; collection: string; filter?: ...; fields?: ...; limit?: number; }
6
  | { type: 'geojson'; url?: string; data?: any; }
7
  | { type: 'vector'; url?: string; }

DirectusShorthand

1
interface DirectusShorthand {
2
  table: string;
3
  queryString?: string;   // e.g. "filter[status][_eq]=published&limit=10"
4
  url?: string;           // defaults to PUBLIC_DIRECTUS_URL env var
5
  token?: string;         // defaults to PUBLIC_DIRECTUS_TOKEN env var
6
}

Accessibility

Full keyboard navigation for sorting and pagination
Proper ARIA labels and table semantics
Clear focus indicators and logical tab order
Accessible loading and error state announcements