--- title: Tables description: Organize data into rows and columns. Supports markdown tables and Table components with sorting, highlighting, and spanning. --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. Tables organize data into rows and columns. Jamdesk supports two approaches: **markdown tables** for quick, simple tables and **Table components** for enhanced features like highlighting and alignment. ## Usage ```mdx Name Type id string
``` ## Markdown Tables The quickest way to create a table. Use pipes (`|`) to separate columns and hyphens (`-`) for the header row: ```markdown | Name | Type | Description | |------|------|-------------| | id | string | Unique identifier | | email | string | User email address | ``` | Name | Type | Description | |------|------|-------------| | id | string | Unique identifier | | email | string | User email address | Markdown tables are great for simple reference data. The Table component offers more control when you need highlighting, alignment, or visual emphasis. ## Table Component For more control, use the ``, ``, and `` components: ```mdx
Name Type Description id string Unique identifier email string User email address
``` Name Type Description id string Unique identifier email string User email address
## Striped Rows Add alternating row backgrounds for better readability: ```mdx Parameter Value timeout30sretries3backoffexponentialmaxDelay60s
``` Parameter Value timeout30sretries3backoffexponentialmaxDelay60s
## Bordered & Compact Add borders between cells and reduce padding: ```mdx A B C 1 2 3
``` A B C 1 2 3
## Row Highlighting Highlight entire rows to draw attention: ```mdx Field Required Description api_key Yes Your API authentication key limit No Maximum results (default: 100)
``` Field Required Description api_key Yes Your API authentication key limit No Maximum results (default: 100)
Available highlight colors: `primary`, `success`, `warning`, `error`, `info` ## Cell Highlighting Highlight individual cells for status indicators: ```mdx Service Status API Operational Database Degraded Storage Outage
``` Service Status API Operational Database Degraded Storage Outage
## Cell Alignment Control text alignment per cell: ```mdx Left Center Right Text Text $99.99
``` Left Center Right Text Text $99.99
## Column & Row Spanning Merge cells across columns or rows: ```mdx Category Item Price Fruits Apple $1.00 Banana $0.50 Subtotal $1.50
``` Category Item Price Fruits Apple $1.00 Banana $0.50 Subtotal $1.50
## Visible Caption Show an accessible table caption above the table: ```mdx Region Revenue North America $1.2M
``` Region Revenue North America $1.2M
## Sortable Columns Enable interactive column sorting with the `sortable` prop. Users can click column headers to sort: ```mdx Name Price Stock Widget A$29.99150Gadget B$49.9975Tool C$19.99200Device D$99.9925
``` Name Price Stock Widget A$29.99150Gadget B$49.9975Tool C$19.99200Device D$99.9925
Click a column header once to sort ascending, again for descending, and a third time to reset. Numbers are sorted numerically, text alphabetically. Sortable works with other features like striped rows: ```mdx Team Wins Losses Eagles124Bears88Lions106
``` Team Wins Losses Eagles124Bears88Lions106
## Props ### Table | Prop | Type | Default | Description | |------|------|---------|-------------| | `striped` | boolean | false | Alternating row backgrounds | | `bordered` | boolean | false | Borders between all cells | | `compact` | boolean | false | Reduced cell padding | | `fullWidth` | boolean | true | Table spans full width | | `caption` | string | - | Table caption text | | `captionVisible` | boolean | false | Show caption visually (default: screen reader only) | | `stickyHeader` | boolean | false | Keep header visible when scrolling | | `sortable` | boolean | false | Enable click-to-sort on column headers | ### Row | Prop | Type | Default | Description | |------|------|---------|-------------| | `header` | boolean | false | Render as header row | | `highlight` | boolean | false | Highlight the row | | `highlightColor` | string | primary | Color: primary, success, warning, error, info | ### Cell | Prop | Type | Default | Description | |------|------|---------|-------------| | `align` | string | left | Text alignment: left, center, right | | `colSpan` | number | - | Columns to span | | `rowSpan` | number | - | Rows to span | | `highlight` | boolean | false | Highlight the cell | | `highlightColor` | string | primary | Color: primary, success, warning, error, info | | `header` | boolean | false | Force header styling | ## What's Next? Browse all available components Learn how to use components in MDX