DataTable

A table for displaying columnar data. Accepts a plain record of arrays or a ModelOutput from a simulation.

Examples

Basic usage

day	susceptible	infected
0	1000	1
1	980	21
2	945	56
3	900	101
4	860	141

<DataTable
  :data="{
    day: [0, 1, 2, 3, 4],
    susceptible: [1000, 980, 945, 900, 860],
    infected: [1, 21, 56, 101, 141],
  }"
/>

Column labels and width

Day	Susceptible	Infected
0	1000	1
1	980	21
2	945	56
3	900	101
4	860	141

<DataTable
  :data="{
    day: [0, 1, 2, 3, 4],
    susceptible: [1000, 980, 945, 900, 860],
    infected: [1, 21, 56, 101, 141],
  }"
  :column-config="{
    day: { label: 'Day', width: 'small' },
    susceptible: { label: 'Susceptible' },
    infected: { label: 'Infected' },
  }"
/>

Cell class and max rows

Gen	Cases
0	1
1	3
2	8
3	15
4	28

<DataTable
  :data="{
    generation: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    cases: [1, 3, 8, 15, 28, 45, 62, 71, 55, 30],
  }"
  :max-rows="5"
  :column-config="{
    generation: { label: 'Gen', cellClass: 'text-secondary', width: 50 },
    cases: { label: 'Cases' },
  }"
/>

Download data link

Pass download-link to render a plain text link below the table for downloading the CSV data. Set it to true for the default label or a string to customize it. When set, the Download CSV menu item is hidden. Use filename to control the downloaded filename, and csv to supply custom CSV content.

day	cases
0	1
1	21
2	56
3	101
4	141

Download cases (CSV)

<DataTable
  :data="{
    day: [0, 1, 2, 3, 4],
    cases: [1, 21, 56, 101, 141],
  }"
  filename="sir-cases"
  download-link="Download cases (CSV)"
/>

Props

Prop	Type	Required	Default
data	TableData	Yes	—
maxRows	number	No	—
columnConfig	Record<string, ColumnConfig>	No	—
menu	boolean | string	No	true
csv	string | (() => string)	No	—
filename	string	No	—
downloadLink	boolean | string	No	—

ColumnConfig

interface ColumnConfig {
  label?: string;
  width?: "small" | "medium" | "large" | number;
  align?: "left" | "center" | "right";
  cellClass?: string;
}