Data Display

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.

Getting Started

JavaScript Embed Features

API v1 Reference

Advanced Integration

Widgets

Table

TableRow Props

TableCell Props

Chart

Props

Series Options

​Table

​TableRow Props

​TableCell Props

​Chart

​Props

​Series Options

Table

TableRow Props

TableCell Props

Chart

Props

Series Options