Content blocks

Simple table

The simple table block (not a database): a grid of rich-text cells with an optional header row and header column.

Name
Role
Status
Alex
Design
Active
Sam
Engineering
Away

Usage

  • Use the simple table for small static grids of text (comparisons, specs, schedules).
  • Turn on the header row and/or header column when the first row or column labels the others.
  • Don’t use it for records people sort, filter or edit as data; use a database instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SimpletableExample.tsx
import { BlockContent, SimpleTable, rt } from '@krackedui/motion';

export function SimpleTableExample() {
  const rows = [
    [rt('Name'), rt('Role'), rt('Status')],
    [rt('Alex'), rt('Design'), rt('Active')],
    [rt('Sam'), rt('Engineering'), rt('Away')],
  ];

  return (
    <BlockContent>
      <SimpleTable rows={rows} />
    </BlockContent>
  );
}

Examples

Header column

Name
Role
Status
Alex
Design
Active
Sam
Engineering
Away

No header, custom widths

Alex
Design
Active
Sam
Engineering
Away

API Reference

SimpleTable

Based on <div> and supports its props. Adds:

PropTypeDefault
rows
RichText[][]
hasHeaderRow
boolean
true
hasHeaderColumn
boolean
false
columnWidths
number[]
120 each
renderCell
(row: number, col: number, className: string) => ReactNode

Accessibility

  • A native <table>: header cells are th with scope="col" / scope="row".
  • Wide tables scroll horizontally inside the block.
© 2026 Motion. Internal documentation.