Table
A structured data table built from rows and cells. Use TableRow and TableCell to define the table structure declaratively.
<Table>
<TableRow header>
<TableCell>Name</TableCell>
<TableCell>Price</TableCell>
</TableRow>
<TableRow>
<TableCell>{name}</TableCell>
<TableCell>{price}</TableCell>
</TableRow>
</Table>
Mark a TableRow with header to render it with bold text and a background color, making it easy to distinguish column headings from data rows.
TableRow Props
| Prop | Type | Default | Description |
|---|
header | boolean | false | Render as a header row with bold text and background styling. |
TableCell Props
| Prop | Type | Default | Description |
|---|
width | number | string | — | Custom cell width. |
colSize | xs | sm | md | lg | xl | — | Preset width. xs: 60px, sm: 100px, md: 160px, lg: 240px, xl: 320px. |
colSpan | number | — | Number of columns this cell spans. |
rowSpan | number | — | Number of rows this cell spans. |
padding | spacing | — | Cell padding. |
align | start | center | end | — | Horizontal alignment of the cell content. |
vAlign | start | center | end | — | Vertical alignment of the cell content. |
Chart
Data visualization component supporting bar, line, and area charts. You can combine multiple series in a single chart to overlay different visualization types.
<Chart
data={salesData}
xAxis="month"
series={[
{ dataKey: "revenue", label: "Revenue", type: "bar", color: "#4f46e5" },
{ dataKey: "target", label: "Target", type: "line", color: "#ef4444" }
]}
/>
Each entry in the series array defines one data series. You can mix bar, line, and area types in the same chart to create composite visualizations like a bar chart with a trend line overlay.
Props
| Prop | Type | Default | Description |
|---|
data | array of objects | — | The dataset to visualize. Each object represents one data point. |
series | array | — | Array of series definitions. See series options below. |
xAxis | string | {dataKey, hide?, labels?} | — | The data key for the x-axis, or an object for advanced configuration. |
yAxis | {domain?} | — | Y-axis configuration. domain accepts numbers, "auto", "dataMin", or "dataMax". |
showLegend | boolean | true | Show or hide the chart legend. |
showTooltip | boolean | true | Show or hide tooltips on hover. |
showYAxis | boolean | false | Show or hide the y-axis labels. |
barGap | number | — | Gap between bars within the same category. |
barCategoryGap | number | — | Gap between bar categories. |
width | number | string | — | Explicit chart width. |
height | number | string | — | Explicit chart height. |
minHeight | number | 200 | Minimum chart height in pixels. |
flex | number | string | — | Flex grow/shrink behavior. |
Series Options
Each object in the series array accepts:
| Prop | Type | Description |
|---|
dataKey | string | The key in the data objects for this series’ values. |
label | string | Display label for the series in legend and tooltip. |
type | bar | line | area | Visualization type. |
color | string | Series color. |
stack | string | Optional stack group. Series with the same stack value are stacked together. |
curveType | string | Optional curve interpolation type for line and area charts. |
