Column Sorting

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
3import { columnSortingConfig } from "./column-sorting.demo-data";
4import "@simple-table/angular/styles.css";
5import type { FacultyMember } from "./column-sorting.demo-data";
6
7@Component({
8  selector: "column-sorting-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      initialSortColumn="age"
19      initialSortDirection="desc"
20    ></simple-table>
21  `,
22})
23export class ColumnSortingDemoComponent {
24  @Input() height: string | number = "400px";
25  @Input() theme?: Theme;
26
27  readonly rows: FacultyMember[] = columnSortingConfig.rows;
28  readonly headers: AngularColumnDef<FacultyMember>[] = columnSortingConfig.headers;
29
30  getRowId = ({ row }: GetRowIdParams<FacultyMember>) => row.id;
31}
32
33
34// column-sorting.demo-data.ts
35// Self-contained demo table setup for this example.
36import type { AngularColumnDef, ValueFormatterProps } from "@simple-table/angular";
37
38export interface FacultyMember {
39  id: number;
40  name: string;
41  age: number;
42  role: string;
43  department: string;
44  startDate: string;
45}
46
47export const COLUMN_SORTING_DATA: FacultyMember[] = [
48  {
49    id: 1,
50    name: "Dr. Elena Vasquez",
51    age: 42,
52    role: "Computer Science Professor",
53    department: "Computer Science",
54    startDate: "2015-08-15",
55  },
56  {
57    id: 2,
58    name: "Prof. Michael Chang",
59    age: 38,
60    role: "Mathematics Professor",
61    department: "Mathematics",
62    startDate: "2017-01-10",
63  },
64  {
65    id: 3,
66    name: "Dr. Sarah Mitchell",
67    age: 45,
68    role: "Dean of Engineering",
69    department: "Administration",
70    startDate: "2012-09-01",
71  },
72  {
73    id: 4,
74    name: "Alex Parker",
75    age: 22,
76    role: "Graduate Student",
77    department: "Computer Science",
78    startDate: "2023-09-01",
79  },
80  {
81    id: 5,
82    name: "Dr. James Wilson",
83    age: 51,
84    role: "Physics Professor",
85    department: "Physics",
86    startDate: "2008-03-15",
87  },
88  {
89    id: 6,
90    name: "Maria Santos",
91    age: 24,
92    role: "Research Assistant",
93    department: "Biology",
94    startDate: "2022-06-01",
95  },
96  {
97    id: 7,
98    name: "Prof. David Kumar",
99    age: 39,
100    role: "Biology Professor",
101    department: "Biology",
102    startDate: "2018-02-14",
103  },
104  {
105    id: 8,
106    name: "Rachel Green",
107    age: 28,
108    role: "Lab Coordinator",
109    department: "Chemistry",
110    startDate: "2020-11-05",
111  },
112  {
113    id: 9,
114    name: "Dr. Lisa Chen",
115    age: 47,
116    role: "Psychology Professor",
117    department: "Psychology",
118    startDate: "2014-08-20",
119  },
120  {
121    id: 10,
122    name: "Ben Taylor",
123    age: 23,
124    role: "Teaching Assistant",
125    department: "Mathematics",
126    startDate: "2023-01-15",
127  },
128  {
129    id: 11,
130    name: "Dr. Anna Rodriguez",
131    age: 35,
132    role: "Chemistry Professor",
133    department: "Chemistry",
134    startDate: "2019-07-01",
135  },
136  {
137    id: 12,
138    name: "Prof. Robert Kim",
139    age: 44,
140    role: "Department Head",
141    department: "Engineering",
142    startDate: "2011-04-12",
143  },
144];
145
146
147export const columnSortingHeaders: AngularColumnDef<FacultyMember, any>[] = [
148  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
149  { accessor: "name", label: "Name", width: 180, sortable: true, type: "string" },
150  { accessor: "age", label: "Age", width: 80, sortable: true, type: "number" },
151  { accessor: "role", label: "Role", width: 200, sortable: true, type: "string" },
152  {
153    accessor: "department",
154    label: "Department",
155    width: 180,
156    sortable: true,
157    type: "string",
158    valueFormatter: ({ value }: ValueFormatterProps<FacultyMember, string>) => {
159      return value.charAt(0).toUpperCase() + value.slice(1);
160    },
161  },
162  {
163    accessor: "startDate",
164    label: "Start Date",
165    width: 140,
166    sortable: true,
167    type: "date",
168    valueFormatter: ({ value }: ValueFormatterProps<FacultyMember>) => {
169      if (typeof value === "string") {
170        return new Date(value).toLocaleDateString("en-US", {
171          year: "numeric",
172          month: "short",
173          day: "numeric",
174        });
175      }
176      return String(value);
177    },
178  },
179];
180
181export const columnSortingConfig = {
182  headers: columnSortingHeaders,
183  rows: COLUMN_SORTING_DATA,
184};
185
186

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

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

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

1import { SimpleTableVanilla } from "simple-table-core";
2import type { FacultyMember } from "./column-sorting.demo-data";
3import type { Theme, GetRowIdParams } from "simple-table-core";
4import { columnSortingConfig } from "./column-sorting.demo-data";
5import "simple-table-core/styles.css";
6
7
8const getRowId = ({ row }: GetRowIdParams<FacultyMember>) => row.id;
9export function renderColumnSortingDemo(
10  container: HTMLElement,
11  options?: { height?: string | number; theme?: Theme }
12): SimpleTableVanilla<FacultyMember> {
13  const table = new SimpleTableVanilla(container, {
14    getRowId,
15    columns: columnSortingConfig.headers,
16    rows: columnSortingConfig.rows,
17    height: options?.height ?? "400px",
18    theme: options?.theme,
19    initialSortColumn: "age",
20    initialSortDirection: "desc",
21  });
22  return table;
23}
24
25
26// column-sorting.demo-data.ts
27// Self-contained demo table setup for this example.
28import type { ColumnDef } from "simple-table-core";
29
30export interface FacultyMember {
31  id: number;
32  name: string;
33  age: number;
34  role: string;
35  department: string;
36  startDate: string;
37}
38
39export const COLUMN_SORTING_DATA: FacultyMember[] = [
40  {
41    id: 1,
42    name: "Dr. Elena Vasquez",
43    age: 42,
44    role: "Computer Science Professor",
45    department: "Computer Science",
46    startDate: "2015-08-15",
47  },
48  {
49    id: 2,
50    name: "Prof. Michael Chang",
51    age: 38,
52    role: "Mathematics Professor",
53    department: "Mathematics",
54    startDate: "2017-01-10",
55  },
56  {
57    id: 3,
58    name: "Dr. Sarah Mitchell",
59    age: 45,
60    role: "Dean of Engineering",
61    department: "Administration",
62    startDate: "2012-09-01",
63  },
64  {
65    id: 4,
66    name: "Alex Parker",
67    age: 22,
68    role: "Graduate Student",
69    department: "Computer Science",
70    startDate: "2023-09-01",
71  },
72  {
73    id: 5,
74    name: "Dr. James Wilson",
75    age: 51,
76    role: "Physics Professor",
77    department: "Physics",
78    startDate: "2008-03-15",
79  },
80  {
81    id: 6,
82    name: "Maria Santos",
83    age: 24,
84    role: "Research Assistant",
85    department: "Biology",
86    startDate: "2022-06-01",
87  },
88  {
89    id: 7,
90    name: "Prof. David Kumar",
91    age: 39,
92    role: "Biology Professor",
93    department: "Biology",
94    startDate: "2018-02-14",
95  },
96  {
97    id: 8,
98    name: "Rachel Green",
99    age: 28,
100    role: "Lab Coordinator",
101    department: "Chemistry",
102    startDate: "2020-11-05",
103  },
104  {
105    id: 9,
106    name: "Dr. Lisa Chen",
107    age: 47,
108    role: "Psychology Professor",
109    department: "Psychology",
110    startDate: "2014-08-20",
111  },
112  {
113    id: 10,
114    name: "Ben Taylor",
115    age: 23,
116    role: "Teaching Assistant",
117    department: "Mathematics",
118    startDate: "2023-01-15",
119  },
120  {
121    id: 11,
122    name: "Dr. Anna Rodriguez",
123    age: 35,
124    role: "Chemistry Professor",
125    department: "Chemistry",
126    startDate: "2019-07-01",
127  },
128  {
129    id: 12,
130    name: "Prof. Robert Kim",
131    age: 44,
132    role: "Department Head",
133    department: "Engineering",
134    startDate: "2011-04-12",
135  },
136];
137
138
139export const columnSortingHeaders: ColumnDef<FacultyMember>[] = [
140  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
141  { accessor: "name", label: "Name", width: 180, sortable: true, type: "string" },
142  { accessor: "age", label: "Age", width: 80, sortable: true, type: "number" },
143  { accessor: "role", label: "Role", width: 200, sortable: true, type: "string" },
144  {
145    accessor: "department",
146    label: "Department",
147    width: 180,
148    sortable: true,
149    type: "string",
150    valueFormatter: ({ value }) => {
151      const department = String(value);
152      return department.charAt(0).toUpperCase() + department.slice(1);
153    },
154  },
155  {
156    accessor: "startDate",
157    label: "Start Date",
158    width: 140,
159    sortable: true,
160    type: "date",
161    valueFormatter: ({ value }) => {
162      if (typeof value === "string") {
163        return new Date(value).toLocaleDateString("en-US", {
164          year: "numeric",
165          month: "short",
166          day: "numeric",
167        });
168      }
169      return String(value);
170    },
171  },
172];
173
174export const columnSortingConfig = {
175  headers: columnSortingHeaders,
176  rows: COLUMN_SORTING_DATA,
177};
178
179