Column Width

1<template>
2  <SimpleTable
3    :auto-expand-columns="!isMobile"
4    :column-resizing="true"
5    :columns="columnWidthConfig.headers"
6    :height="height"
7    :rows="columnWidthConfig.rows"
8    :theme="theme"
9  />
10</template>
11
12<script setup lang="ts">
13import { ref, onMounted, onUnmounted } from "vue";
14import {SimpleTable} from "@simple-table/vue";import type { Theme } from "@simple-table/vue";
15import { columnWidthConfig } from "./column-width.demo-data";
16import "@simple-table/vue/styles.css";
17
18withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
19  height: "400px",
20});
21
22const isMobile = ref(false);
23
24function checkMobile() {
25  isMobile.value = window.innerWidth < 768;
26}
27
28onMounted(() => {
29  checkMobile();
30  window.addEventListener("resize", checkMobile);
31});
32
33onUnmounted(() => {
34  window.removeEventListener("resize", checkMobile);
35});
36</script>

1import { Component, Input, OnInit, OnDestroy } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, Row, Theme } from "@simple-table/angular";
3import { columnWidthConfig } from "./column-width.demo-data";
4import "@simple-table/angular/styles.css";
5
6@Component({
7  selector: "column-width-demo",
8  standalone: true,
9  imports: [SimpleTableComponent],
10  template: `
11    <simple-table
12      [autoExpandColumns]="!isMobile"
13      [columnResizing]="true"
14      [rows]="rows"
15      [columns]="headers"
16      [height]="height"
17      [theme]="theme"
18    ></simple-table>
19  `,
20})
21export class ColumnWidthDemoComponent implements OnInit, OnDestroy {
22  @Input() height: string | number = "400px";
23  @Input() theme?: Theme;
24
25  readonly rows: Row[] = columnWidthConfig.rows;
26  readonly headers: AngularColumnDef[] = columnWidthConfig.headers;
27  isMobile = false;
28
29  private checkMobile = () => { this.isMobile = window.innerWidth < 768; };
30
31  ngOnInit() {
32    this.checkMobile();
33    window.addEventListener("resize", this.checkMobile);
34  }
35
36  ngOnDestroy() {
37    window.removeEventListener("resize", this.checkMobile);
38  }
39}
40
41
42// column-width.demo-data.ts
43// Self-contained demo table setup for this example.
44import type { AngularColumnDef } from "@simple-table/angular";
45
46
47export const columnWidthHeaders: AngularColumnDef[] = [
48  { accessor: "id", label: "ID", width: 60, type: "number" },
49  { accessor: "name", label: "Name", width: "1fr", minWidth: 120, type: "string" },
50  { accessor: "email", label: "Email", width: "1fr", minWidth: 180, type: "string" },
51  { accessor: "age", label: "Age", width: 80, type: "number" },
52  { accessor: "department", label: "Department", width: "auto", minWidth: 100, type: "string" },
53  { accessor: "salary", label: "Salary", width: 120, align: "right", type: "number" },
54];
55
56export const columnWidthData = [
57  { id: 1, name: "Alexandra Reeves", email: "alex.reeves@techstartup.io", age: 32, department: "AI Research", salary: "$145,000" },
58  { id: 2, name: "Zephyr Kim", email: "zephyr.kim@techstartup.io", age: 28, department: "Product Design", salary: "$125,000" },
59  { id: 3, name: "Phoenix Okafor", email: "phoenix.okafor@techstartup.io", age: 35, department: "Platform Engineering", salary: "$160,000" },
60  { id: 4, name: "Luna Tanaka", email: "luna.tanaka@techstartup.io", age: 29, department: "DevOps & Infrastructure", salary: "$138,000" },
61  { id: 5, name: "River Stone", email: "river.stone@techstartup.io", age: 31, department: "Growth Engineering", salary: "$142,000" },
62  { id: 6, name: "Sage Morrison", email: "sage.morrison@techstartup.io", age: 27, department: "Customer Success", salary: "$95,000" },
63  { id: 7, name: "Atlas Chen", email: "atlas.chen@techstartup.io", age: 33, department: "Security & Compliance", salary: "$155,000" },
64  { id: 8, name: "Nova Patel", email: "nova.patel@techstartup.io", age: 30, department: "Data Science", salary: "$148,000" },
65  { id: 9, name: "Isabella Patel", email: "isabella.patel@techstartup.io", age: 29, department: "Marketing", salary: "$130,000" },
66  { id: 10, name: "Leo Patel", email: "leo.patel@techstartup.io", age: 30, department: "Sales", salary: "$125,000" },
67  { id: 11, name: "Oliver Patel", email: "oliver.patel@techstartup.io", age: 31, department: "HR", salary: "$115,000" },
68  { id: 12, name: "Sophia Patel", email: "sophia.patel@techstartup.io", age: 28, department: "Finance", salary: "$120,000" },
69  { id: 13, name: "William Patel", email: "william.patel@techstartup.io", age: 32, department: "Marketing", salary: "$135,000" },
70];
71
72export const columnWidthConfig = {
73  headers: columnWidthHeaders,
74  rows: columnWidthData,
75  tableProps: { columnResizing: true },
76} as const;
77

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme } from "@simple-table/svelte";
3  import { columnWidthConfig } from "./column-width.demo-data";
4  import "@simple-table/svelte/styles.css";
5
6  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
7  let isMobile = $state(false);
8
9  function checkMobile() {
10    isMobile = window.innerWidth < 768;
11  }
12
13  $effect(() => {
14    checkMobile();
15    window.addEventListener("resize", checkMobile);
16    return () => window.removeEventListener("resize", checkMobile);
17  });
18</script>
19
20<SimpleTable
21  autoExpandColumns={!isMobile}
22  columnResizing={true}
23  columns={columnWidthConfig.headers}
24  rows={columnWidthConfig.rows}
25  {height}
26  {theme}
27/>

1import { createSignal, onMount, onCleanup } from "solid-js";
2import {SimpleTable} from "@simple-table/solid";import type { Theme } from "@simple-table/solid";
3import { columnWidthConfig } from "./column-width.demo-data";
4import "@simple-table/solid/styles.css";
5
6export default function ColumnWidthDemo(props: { height?: string | number; theme?: Theme }) {
7  const [isMobile, setIsMobile] = createSignal(false);
8
9  const check = () => setIsMobile(window.innerWidth < 768);
10
11  onMount(() => {
12    check();
13    window.addEventListener("resize", check);
14  });
15
16  onCleanup(() => {
17    window.removeEventListener("resize", check);
18  });
19
20  return (
21    <SimpleTable
22      autoExpandColumns={!isMobile()}
23      columnResizing
24      columns={columnWidthConfig.headers}
25      height={props.height ?? "400px"}
26      rows={columnWidthConfig.rows}
27      theme={props.theme}
28    />
29  );
30}

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme } from "simple-table-core";
3import { columnWidthConfig } from "./column-width.demo-data";
4import "simple-table-core/styles.css";
5
6export function renderColumnWidthDemo(
7  container: HTMLElement,
8  options?: { height?: string | number; theme?: Theme },
9): SimpleTableVanilla {
10  const isMobile = window.innerWidth < 768;
11
12  const table = new SimpleTableVanilla(container, {
13    columns: columnWidthConfig.headers,
14    rows: columnWidthConfig.rows,
15    height: options?.height ?? "400px",
16    theme: options?.theme,
17    autoExpandColumns: !isMobile,
18    columnResizing: true,
19  });
20
21  const check = () => {
22    const mobile = window.innerWidth < 768;
23    table.update({ autoExpandColumns: !mobile });
24  };
25  window.addEventListener("resize", check);
26
27  return table;
28}
29
30
31// column-width.demo-data.ts
32// Self-contained demo table setup for this example.
33import type { ColumnDef } from "simple-table-core";
34
35
36export const columnWidthHeaders: ColumnDef[] = [
37  { accessor: "id", label: "ID", width: 60, type: "number" },
38  { accessor: "name", label: "Name", width: "1fr", minWidth: 120, type: "string" },
39  { accessor: "email", label: "Email", width: "1fr", minWidth: 180, type: "string" },
40  { accessor: "age", label: "Age", width: 80, type: "number" },
41  { accessor: "department", label: "Department", width: "auto", minWidth: 100, type: "string" },
42  { accessor: "salary", label: "Salary", width: 120, align: "right", type: "number" },
43];
44
45export const columnWidthData = [
46  { id: 1, name: "Alexandra Reeves", email: "alex.reeves@techstartup.io", age: 32, department: "AI Research", salary: "$145,000" },
47  { id: 2, name: "Zephyr Kim", email: "zephyr.kim@techstartup.io", age: 28, department: "Product Design", salary: "$125,000" },
48  { id: 3, name: "Phoenix Okafor", email: "phoenix.okafor@techstartup.io", age: 35, department: "Platform Engineering", salary: "$160,000" },
49  { id: 4, name: "Luna Tanaka", email: "luna.tanaka@techstartup.io", age: 29, department: "DevOps & Infrastructure", salary: "$138,000" },
50  { id: 5, name: "River Stone", email: "river.stone@techstartup.io", age: 31, department: "Growth Engineering", salary: "$142,000" },
51  { id: 6, name: "Sage Morrison", email: "sage.morrison@techstartup.io", age: 27, department: "Customer Success", salary: "$95,000" },
52  { id: 7, name: "Atlas Chen", email: "atlas.chen@techstartup.io", age: 33, department: "Security & Compliance", salary: "$155,000" },
53  { id: 8, name: "Nova Patel", email: "nova.patel@techstartup.io", age: 30, department: "Data Science", salary: "$148,000" },
54  { id: 9, name: "Isabella Patel", email: "isabella.patel@techstartup.io", age: 29, department: "Marketing", salary: "$130,000" },
55  { id: 10, name: "Leo Patel", email: "leo.patel@techstartup.io", age: 30, department: "Sales", salary: "$125,000" },
56  { id: 11, name: "Oliver Patel", email: "oliver.patel@techstartup.io", age: 31, department: "HR", salary: "$115,000" },
57  { id: 12, name: "Sophia Patel", email: "sophia.patel@techstartup.io", age: 28, department: "Finance", salary: "$120,000" },
58  { id: 13, name: "William Patel", email: "william.patel@techstartup.io", age: 32, department: "Marketing", salary: "$135,000" },
59];
60
61export const columnWidthConfig = {
62  headers: columnWidthHeaders,
63  rows: columnWidthData,
64  tableProps: { columnResizing: true },
65} as const;
66