Row Height

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

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

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

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      columns={rowHeightConfig.headers}
9      getRowId={({ row }) => row.id}
10      rows={rowHeightConfig.rows}
11      height={props.height ?? "400px"}
12      theme={props.theme}
13      customTheme={rowHeightConfig.tableProps.customTheme}
14    />
15  );
16}

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