Documentation

Column Alignment

Column alignment allows you to control how content is positioned horizontally within each column, improving readability and visual organization of your data.

React TSX

Copy

1import {SimpleTable} from "@simple-table/react";import type { Theme } from "@simple-table/react";
2import { columnAlignmentConfig } from "./column-alignment.demo-data";
3import "@simple-table/react/styles.css";
4
5const ColumnAlignmentDemo = ({
6  height = "400px",
7  theme,
8}: {
9  height?: string | number;
10  theme?: Theme;
11}) => {
12  return (
13    <SimpleTable
14      defaultHeaders={columnAlignmentConfig.headers}
15      rows={columnAlignmentConfig.rows}
16      height={height}
17      theme={theme}
18    />
19  );
20};
21
22export default ColumnAlignmentDemo;

Vue SFC

Copy

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

Angularcolumn-alignment-demo.component.ts

Copy

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

Svelte

Copy

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme } from "@simple-table/svelte";
3  import { columnAlignmentConfig } from "./column-alignment.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={columnAlignmentConfig.headers}
11  rows={columnAlignmentConfig.rows}
12  {height}
13  {theme}
14/>

Solid TSX

Copy

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      defaultHeaders={columnAlignmentConfig.headers}
9      rows={columnAlignmentConfig.rows}
10      height={props.height ?? "400px"}
11      theme={props.theme}
12    />
13  );
14}

TypeScriptColumnAlignmentDemo.ts

Copy

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

StackBlitz

Basic Usage

Control column alignment by setting the align property in your header definitions:

Column Alignment Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`HeaderObject.align` enum	Optional	Controls the horizontal alignment of content within the column for both header and cell content. Options: left center right

Best Practices

Consider these guidelines for optimal column alignment:

Text Content

Left-align text content such as names, descriptions, and other textual data for easier reading.

Numeric Values

Right-align numbers, currencies, and percentages to make decimal points align vertically.

Headers

Match the header alignment with its column content for consistency.

Status Indicators

Center-align status badges, icons, and other indicator elements to create visual focus.