Row Height

1<template>
2  <SimpleTable
3    :default-headers="rowHeightConfig.headers"
4    :rows="rowHeightConfig.rows"
5    :height="height"
6    :theme="theme"
7    :custom-theme="rowHeightConfig.tableProps.customTheme"
8  />
9</template>
10
11<script setup lang="ts">
12import {SimpleTable} from "@simple-table/vue";import type { Theme } from "@simple-table/vue";
13import { rowHeightConfig } from "./row-height.demo-data";
14import "@simple-table/vue/styles.css";
15
16withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
17  height: "400px",
18});
19</script>

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularHeaderObject, Row, Theme } from "@simple-table/angular";
3import { rowHeightConfig } from "./row-height.demo-data";
4import "@simple-table/angular/styles.css";
5
6@Component({
7  selector: "row-height-demo",
8  standalone: true,
9  imports: [SimpleTableComponent],
10  template: `
11    <simple-table
12      [rows]="rows"
13      [defaultHeaders]="headers"
14      [height]="height"
15      [theme]="theme"
16      [customTheme]="customTheme"
17    ></simple-table>
18  `,
19})
20export class RowHeightDemoComponent {
21  @Input() height: string | number = "400px";
22  @Input() theme?: Theme;
23
24  readonly rows: Row[] = rowHeightConfig.rows;
25  readonly headers: AngularHeaderObject[] = rowHeightConfig.headers;
26  readonly customTheme = rowHeightConfig.tableProps.customTheme;
27}
28
29
30// row-height.demo-data.ts
31// Self-contained demo table setup for this example.
32import type { AngularHeaderObject } from "@simple-table/angular";
33
34
35export const rowHeightHeaders: AngularHeaderObject[] = [
36  { accessor: "id", label: "ID", width: 80, type: "number" },
37  { accessor: "name", label: "Name", minWidth: 150, width: "1fr", type: "string" },
38  { accessor: "age", label: "Age", width: 100, type: "string" },
39  { accessor: "role", label: "Role", minWidth: 180, width: "1fr", type: "string" },
40  { accessor: "department", label: "Department", minWidth: 180, width: "1fr", type: "string" },
41];
42
43export const rowHeightData = [
44  { id: 1, name: "Valentina Romano", age: 34, role: "Principal Architect", department: "Design" },
45  { id: 2, name: "Mateo Fernandez", age: 29, role: "Project Architect", department: "Design" },
46  { id: 3, name: "Amira Okafor", age: 41, role: "Design Director", department: "Leadership" },
47  { id: 4, name: "Ravi Nakamura", age: 26, role: "Junior Architect", department: "Design" },
48  { id: 5, name: "Layla Hassan", age: 32, role: "Structural Engineer", department: "Engineering" },
49  { id: 6, name: "Cosmo Chen", age: 30, role: "Interior Designer", department: "Interiors" },
50  { id: 7, name: "Stella Petrov", age: 28, role: "Urban Planner", department: "Planning" },
51  { id: 8, name: "Dante Kim", age: 35, role: "Project Manager", department: "Operations" },
52  { id: 9, name: "Indigo Martinez", age: 27, role: "Environmental Designer", department: "Sustainability" },
53  { id: 10, name: "Blaze Williams", age: 33, role: "Construction Manager", department: "Construction" },
54  { id: 11, name: "Iris Silva", age: 31, role: "Landscape Architect", department: "Landscape" },
55  { id: 12, name: "Neo Thompson", age: 36, role: "Technical Coordinator", department: "Technical" },
56];
57
58export const rowHeightConfig = {
59  headers: rowHeightHeaders,
60  rows: rowHeightData,
61  tableProps: { customTheme: { rowHeight: 32 } },
62} as const;
63

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme } from "@simple-table/svelte";
3  import { rowHeightConfig } from "./row-height.demo-data";
4  import "@simple-table/svelte/styles.css";
5
6  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
7</script>
8
9<SimpleTable
10  defaultHeaders={rowHeightConfig.headers}
11  rows={rowHeightConfig.rows}
12  {height}
13  {theme}
14  customTheme={rowHeightConfig.tableProps.customTheme}
15/>

1import {SimpleTable} from "@simple-table/solid";import type { Theme } from "@simple-table/solid";
2import { rowHeightConfig } from "./row-height.demo-data";
3import "@simple-table/solid/styles.css";
4
5export default function RowHeightDemo(props: { height?: string | number; theme?: Theme }) {
6  return (
7    <SimpleTable
8      defaultHeaders={rowHeightConfig.headers}
9      rows={rowHeightConfig.rows}
10      height={props.height ?? "400px"}
11      theme={props.theme}
12      customTheme={rowHeightConfig.tableProps.customTheme}
13    />
14  );
15}

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme } from "simple-table-core";
3import { rowHeightConfig } from "./row-height.demo-data";
4import "simple-table-core/styles.css";
5
6export function renderRowHeightDemo(
7  container: HTMLElement,
8  options?: { height?: string | number; theme?: Theme }
9): SimpleTableVanilla {
10  const table = new SimpleTableVanilla(container, {
11    defaultHeaders: rowHeightConfig.headers,
12    rows: rowHeightConfig.rows,
13    height: options?.height ?? "400px",
14    theme: options?.theme,
15    customTheme: rowHeightConfig.tableProps.customTheme,
16  });
17  return table;
18}
19
20
21// row-height.demo-data.ts
22// Self-contained demo table setup for this example.
23import type { HeaderObject } from "simple-table-core";
24
25
26export const rowHeightHeaders: HeaderObject[] = [
27  { accessor: "id", label: "ID", width: 80, type: "number" },
28  { accessor: "name", label: "Name", minWidth: 150, width: "1fr", type: "string" },
29  { accessor: "age", label: "Age", width: 100, type: "string" },
30  { accessor: "role", label: "Role", minWidth: 180, width: "1fr", type: "string" },
31  { accessor: "department", label: "Department", minWidth: 180, width: "1fr", type: "string" },
32];
33
34export const rowHeightData = [
35  { id: 1, name: "Valentina Romano", age: 34, role: "Principal Architect", department: "Design" },
36  { id: 2, name: "Mateo Fernandez", age: 29, role: "Project Architect", department: "Design" },
37  { id: 3, name: "Amira Okafor", age: 41, role: "Design Director", department: "Leadership" },
38  { id: 4, name: "Ravi Nakamura", age: 26, role: "Junior Architect", department: "Design" },
39  { id: 5, name: "Layla Hassan", age: 32, role: "Structural Engineer", department: "Engineering" },
40  { id: 6, name: "Cosmo Chen", age: 30, role: "Interior Designer", department: "Interiors" },
41  { id: 7, name: "Stella Petrov", age: 28, role: "Urban Planner", department: "Planning" },
42  { id: 8, name: "Dante Kim", age: 35, role: "Project Manager", department: "Operations" },
43  { id: 9, name: "Indigo Martinez", age: 27, role: "Environmental Designer", department: "Sustainability" },
44  { id: 10, name: "Blaze Williams", age: 33, role: "Construction Manager", department: "Construction" },
45  { id: 11, name: "Iris Silva", age: 31, role: "Landscape Architect", department: "Landscape" },
46  { id: 12, name: "Neo Thompson", age: 36, role: "Technical Coordinator", department: "Technical" },
47];
48
49export const rowHeightConfig = {
50  headers: rowHeightHeaders,
51  rows: rowHeightData,
52  tableProps: { customTheme: { rowHeight: 32 } },
53} as const;
54