Chart Columns

1<template>
2  <SimpleTable
3    :columns="chartsConfig.headers"
4    :rows="chartsConfig.rows"
5    :column-reordering="true"
6    :column-resizing="true"
7    :selectable-cells="true"
8    height="400px"
9  />
10</template>
11
12<script setup lang="ts">
13import { SimpleTable } from "@simple-table/vue";
14import { chartsConfig } from "./charts.demo-data";
15import "@simple-table/vue/styles.css";
16
17// chartsConfig.headers use built-in chart column types, e.g.
18//   { accessor: "trend", type: "lineAreaChart", width: 160 }
19//   { accessor: "revenue", type: "barChart", width: 160 }
20</script>
21

1import { Component } from "@angular/core";
2import { SimpleTableComponent } from "@simple-table/angular";
3import { chartsConfig } from "./charts.demo-data";
4import "@simple-table/angular/styles.css";
5
6// chartsConfig.headers use built-in chart column types, e.g.
7//   { accessor: "trend", type: "lineAreaChart", width: 160 }
8//   { accessor: "revenue", type: "barChart", width: 160 }
9
10@Component({
11  selector: "charts-demo",
12  standalone: true,
13  imports: [SimpleTableComponent],
14  template: `
15    <simple-table
16      [columns]="headers"
17      [rows]="rows"
18      [columnReordering]="true"
19      [columnResizing]="true"
20      [selectableCells]="true"
21      height="400px"
22    ></simple-table>
23  `,
24})
25export class ChartsDemoComponent {
26  readonly rows = chartsConfig.rows;
27  readonly headers = chartsConfig.headers;
28}
29

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import { chartsConfig } from "./charts.demo-data";
4  import "@simple-table/svelte/styles.css";
5
6  // chartsConfig.headers use built-in chart column types, e.g.
7  //   { accessor: "trend", type: "lineAreaChart", width: 160 }
8  //   { accessor: "revenue", type: "barChart", width: 160 }
9</script>
10
11<SimpleTable
12  columns={chartsConfig.headers}
13  rows={chartsConfig.rows}
14  columnReordering={true}
15  columnResizing={true}
16  selectableCells={true}
17  height="400px"
18/>
19

1import { SimpleTable } from "@simple-table/solid";
2import { chartsConfig } from "./charts.demo-data";
3import "@simple-table/solid/styles.css";
4
5// chartsConfig.headers use built-in chart column types, e.g.
6//   { accessor: "trend", type: "lineAreaChart", width: 160 }
7//   { accessor: "revenue", type: "barChart", width: 160 }
8
9export default function ChartsDemo() {
10  return (
11    <SimpleTable
12      columns={chartsConfig.headers}
13      rows={chartsConfig.rows}
14      columnReordering
15      columnResizing
16      selectableCells
17      height="400px"
18    />
19  );
20}
21

1import { SimpleTableVanilla } from "simple-table-core";
2import { chartsConfig } from "./charts.demo-data";
3import "simple-table-core/styles.css";
4
5// chartsConfig.headers use built-in chart column types, e.g.
6//   { accessor: "trend", type: "lineAreaChart", width: 160 }
7//   { accessor: "revenue", type: "barChart", width: 160 }
8
9export function renderChartsDemo(container: HTMLElement) {
10  return new SimpleTableVanilla(container, {
11    columns: chartsConfig.headers,
12    rows: chartsConfig.rows,
13    columnReordering: true,
14    columnResizing: true,
15    selectableCells: true,
16    height: "400px",
17  });
18}
19