Column Alignment

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
3import { columnAlignmentConfig } from "./column-alignment.demo-data";
4import "@simple-table/angular/styles.css";
5import type { ColumnAlignmentPlayer } from "./column-alignment.demo-data";
6
7@Component({
8  selector: "column-alignment-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    ></simple-table>
19  `,
20})
21export class ColumnAlignmentDemoComponent {
22  @Input() height: string | number = "400px";
23  @Input() theme?: Theme;
24
25  readonly rows: ColumnAlignmentPlayer[] = columnAlignmentConfig.rows;
26  readonly headers: AngularColumnDef<ColumnAlignmentPlayer>[] = columnAlignmentConfig.headers;
27
28  getRowId = ({ row }: GetRowIdParams<ColumnAlignmentPlayer>) => row.id;
29}
30
31
32// column-alignment.demo-data.ts
33// Self-contained demo table setup for this example.
34import type { AngularColumnDef } from "@simple-table/angular";
35
36export interface ColumnAlignmentPlayer {
37  id: number;
38  name: string;
39  score: number;
40  rating: number;
41  status: string;
42}
43
44export const columnAlignmentHeaders: AngularColumnDef<ColumnAlignmentPlayer>[] = [
45  { accessor: "id", label: "ID", width: 80, align: "left", type: "number" },
46  { accessor: "name", label: "Name", minWidth: 100, width: "1fr", align: "center", type: "string" },
47  { accessor: "score", label: "Score", width: 120, align: "right", type: "number" },
48  { accessor: "rating", label: "Rating", width: 120, align: "right", type: "number" },
49  { accessor: "status", label: "Status", width: 120, align: "left", type: "string" },
50];
51
52export const columnAlignmentData: ColumnAlignmentPlayer[] = [
53  { id: 1, name: "Camila Rodriguez", score: 94, rating: 4.9, status: "Active" },
54  { id: 2, name: "Enzo Silva", score: 89, rating: 4.6, status: "Active" },
55  { id: 3, name: "Yuki Kim", score: 96, rating: 4.8, status: "Active" },
56  { id: 4, name: "Leandro Nakamura", score: 81, rating: 4.2, status: "Injured" },
57  { id: 5, name: "Nadia Petrov", score: 87, rating: 4.4, status: "Active" },
58  { id: 6, name: "Taj Chen", score: 92, rating: 4.7, status: "Active" },
59  { id: 7, name: "Mira Thompson", score: 90, rating: 4.5, status: "Active" },
60  { id: 8, name: "Juno Garcia", score: 84, rating: 4.3, status: "Inactive" },
61  { id: 9, name: "Caspian Williams", score: 95, rating: 4.9, status: "Active" },
62  { id: 10, name: "Vera Martinez", score: 88, rating: 4.4, status: "Active" },
63  { id: 11, name: "Zion Hassan", score: 93, rating: 4.8, status: "Active" },
64  { id: 12, name: "Kira Kumar", score: 91, rating: 4.6, status: "Resting" },
65];
66
67export const columnAlignmentConfig = {
68  headers: columnAlignmentHeaders,
69  rows: columnAlignmentData,
70};
71

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

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, GetRowIdParams } from "@simple-table/svelte";
4  import { columnAlignmentConfig } from "./column-alignment.demo-data";
5  import type { ColumnAlignmentPlayer } from "./column-alignment.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<ColumnAlignmentPlayer>) => row.id;
11</script>
12
13<SimpleTable
14  columns={columnAlignmentConfig.headers}
15  rows={columnAlignmentConfig.rows}
16  getRowId={getRowId}
17  {height}
18  {theme}
19/>

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

1import { SimpleTableVanilla } from "simple-table-core";
2import type { ColumnAlignmentPlayer } from "./column-alignment.demo-data";
3import type { Theme, GetRowIdParams } from "simple-table-core";
4import { columnAlignmentConfig } from "./column-alignment.demo-data";
5import "simple-table-core/styles.css";
6
7
8const getRowId = ({ row }: GetRowIdParams<ColumnAlignmentPlayer>) => row.id;
9export function renderColumnAlignmentDemo(
10  container: HTMLElement,
11  options?: { height?: string | number; theme?: Theme }
12): SimpleTableVanilla<ColumnAlignmentPlayer> {
13  const table = new SimpleTableVanilla(container, {
14    getRowId,
15    columns: columnAlignmentConfig.headers,
16    rows: columnAlignmentConfig.rows,
17    height: options?.height ?? "400px",
18    theme: options?.theme,
19  });
20  return table;
21}
22
23
24// column-alignment.demo-data.ts
25// Self-contained demo table setup for this example.
26import type { ColumnDef } from "simple-table-core";
27
28export interface ColumnAlignmentPlayer {
29  id: number;
30  name: string;
31  score: number;
32  rating: number;
33  status: string;
34}
35
36export const columnAlignmentHeaders: ColumnDef<ColumnAlignmentPlayer>[] = [
37  { accessor: "id", label: "ID", width: 80, align: "left", type: "number" },
38  { accessor: "name", label: "Name", minWidth: 100, width: "1fr", align: "center", type: "string" },
39  { accessor: "score", label: "Score", width: 120, align: "right", type: "number" },
40  { accessor: "rating", label: "Rating", width: 120, align: "right", type: "number" },
41  { accessor: "status", label: "Status", width: 120, align: "left", type: "string" },
42];
43
44export const columnAlignmentData: ColumnAlignmentPlayer[] = [
45  { id: 1, name: "Camila Rodriguez", score: 94, rating: 4.9, status: "Active" },
46  { id: 2, name: "Enzo Silva", score: 89, rating: 4.6, status: "Active" },
47  { id: 3, name: "Yuki Kim", score: 96, rating: 4.8, status: "Active" },
48  { id: 4, name: "Leandro Nakamura", score: 81, rating: 4.2, status: "Injured" },
49  { id: 5, name: "Nadia Petrov", score: 87, rating: 4.4, status: "Active" },
50  { id: 6, name: "Taj Chen", score: 92, rating: 4.7, status: "Active" },
51  { id: 7, name: "Mira Thompson", score: 90, rating: 4.5, status: "Active" },
52  { id: 8, name: "Juno Garcia", score: 84, rating: 4.3, status: "Inactive" },
53  { id: 9, name: "Caspian Williams", score: 95, rating: 4.9, status: "Active" },
54  { id: 10, name: "Vera Martinez", score: 88, rating: 4.4, status: "Active" },
55  { id: 11, name: "Zion Hassan", score: 93, rating: 4.8, status: "Active" },
56  { id: 12, name: "Kira Kumar", score: 91, rating: 4.6, status: "Resting" },
57];
58
59export const columnAlignmentConfig = {
60  headers: columnAlignmentHeaders,
61  rows: columnAlignmentData,
62};
63