Documentation

Empty State

Customize what users see when the table has no rows with tableEmptyStateRenderer.

Custom empty state

Pass tableEmptyStateRenderer to replace the blank body when rows is empty (no data or filters match nothing). In Angular, put an stEmpty template inside the table tag instead.

React TSX

Copy

const EmptyState = () => (
  <div style={{ padding: 48, textAlign: "center", color: "#6b7280" }}>
    No data available
  </div>
);

<SimpleTable
  columns={columns}
  rows={[]}
  tableEmptyStateRenderer={<EmptyState />}
/>

Loading vs empty

While fetching data, use isLoading instead — the empty renderer only applies when there are no rows and loading is off.

Example

An empty table with a custom message. Use Code or StackBlitz for the full example.

React TSX

Copy

1import {SimpleTable} from "@simple-table/react";import type { Theme } from "@simple-table/react";
2import { emptyStateConfig } from "./empty-state.demo-data";
3import "@simple-table/react/styles.css";
4
5const EmptyIcon = () => (
6  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" strokeWidth="1.5">
7    <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7" />
8    <path d="M16 3H8L3 7h18l-5-4z" />
9    <line x1="10" y1="12" x2="14" y2="12" />
10  </svg>
11);
12
13const tableEmptyState = (
14  <div
15    style={{
16      display: "flex",
17      flexDirection: "column",
18      alignItems: "center",
19      justifyContent: "center",
20      padding: "48px 24px",
21      color: "#64748b",
22      gap: 12
23    }}
24  >
25    <EmptyIcon />
26    <div style={{ fontSize: 16, fontWeight: 600 }}>No data available</div>
27    <div style={{ fontSize: 13 }}>Try adjusting your filters or adding new records.</div>
28  </div>
29);
30
31const EmptyStateDemo = ({
32  height = "400px",
33  theme
34}: {
35  height?: string | number;
36  theme?: Theme;
37}) => {
38  return (
39    <SimpleTable
40      columns={emptyStateConfig.headers}
41      rows={emptyStateConfig.rows}
42      tableEmptyStateRenderer={tableEmptyState}
43      height={height}
44      theme={theme}
45      getRowId={({ row }) => row.id}
46    />
47  );
48};
49
50export default EmptyStateDemo;

Angularempty-state-demo.component.ts

Copy

1import { Component, Input } from "@angular/core";
2import { SimpleTableImports } from "@simple-table/angular";
3import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
4import { emptyStateConfig } from "./empty-state.demo-data";
5import "@simple-table/angular/styles.css";
6import type { EmptyEmployee } from "./empty-state.demo-data";
7
8@Component({
9  selector: "empty-state-demo",
10  standalone: true,
11  imports: [SimpleTableImports],
12  template: `
13    <simple-table
14      [getRowId]="getRowId"
15      [rows]="rows"
16      [columns]="headers"
17      [height]="height"
18      [theme]="theme"
19    >
20      <ng-template stEmpty>
21        <div
22          style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:#64748b;gap:12px;"
23        >
24          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5">
25            <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7" />
26            <path d="M16 3H8L3 7h18l-5-4z" />
27            <line x1="10" y1="12" x2="14" y2="12" />
28          </svg>
29          <div style="font-size:16px;font-weight:600;">No data available</div>
30          <div style="font-size:13px;">Try adjusting your filters or adding new records.</div>
31        </div>
32      </ng-template>
33    </simple-table>
34  `,
35})
36export class EmptyStateDemoComponent {
37  @Input() height: string | number = "400px";
38  @Input() theme?: Theme;
39
40  readonly rows: EmptyEmployee[] = emptyStateConfig.rows;
41  readonly headers: AngularColumnDef<EmptyEmployee>[] = emptyStateConfig.headers;
42
43  getRowId = ({ row }: GetRowIdParams<EmptyEmployee>) => row.id;
44}
45
46
47// empty-state.demo-data.ts
48// Self-contained demo table setup for this example.
49import type { AngularColumnDef } from "@simple-table/angular";
50
51export interface EmptyEmployee {
52  id: number;
53  name: string;
54  email: string;
55  role: string;
56  department: string;
57}
58
59export const emptyStateData: EmptyEmployee[] = [];
60
61export const emptyStateHeaders: AngularColumnDef<EmptyEmployee>[] = [
62  { accessor: "id", label: "ID", width: 60, type: "number" },
63  { accessor: "name", label: "Name", width: 180, type: "string" },
64  { accessor: "email", label: "Email", width: 220, type: "string" },
65  { accessor: "role", label: "Role", width: 140, type: "string" },
66  { accessor: "department", label: "Department", width: 150, type: "string" },
67];
68
69export const emptyStateConfig = {
70  headers: emptyStateHeaders,
71  rows: emptyStateData,
72};
73

TypeScriptEmptyStateDemo.ts

Copy

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme, GetRowIdParams } from "simple-table-core";
3import { emptyStateConfig } from "./empty-state.demo-data";
4import type { EmptyEmployee } from "./empty-state.demo-data";
5import "simple-table-core/styles.css";
6
7const getRowId = ({ row }: GetRowIdParams<EmptyEmployee>) => row.id;
8
9function buildEmptyStateElement(): HTMLElement {
10  const root = document.createElement("div");
11  Object.assign(root.style, {
12    display: "flex",
13    flexDirection: "column",
14    alignItems: "center",
15    justifyContent: "center",
16    padding: "48px 24px",
17    color: "#64748b",
18    gap: "12px",
19  });
20
21  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
22  svg.setAttribute("width", "48");
23  svg.setAttribute("height", "48");
24  svg.setAttribute("viewBox", "0 0 24 24");
25  svg.setAttribute("fill", "none");
26  svg.setAttribute("stroke", "#94a3b8");
27  svg.setAttribute("stroke-width", "1.5");
28
29  for (const d of [
30    "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7",
31    "M16 3H8L3 7h18l-5-4z",
32  ]) {
33    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
34    path.setAttribute("d", d);
35    svg.appendChild(path);
36  }
37  const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
38  line.setAttribute("x1", "10");
39  line.setAttribute("y1", "12");
40  line.setAttribute("x2", "14");
41  line.setAttribute("y2", "12");
42  svg.appendChild(line);
43
44  const title = document.createElement("div");
45  Object.assign(title.style, { fontSize: "16px", fontWeight: "600" });
46  title.textContent = "No data available";
47
48  const subtitle = document.createElement("div");
49  Object.assign(subtitle.style, { fontSize: "13px" });
50  subtitle.textContent = "Try adjusting your filters or adding new records.";
51
52  root.append(svg, title, subtitle);
53  return root;
54}
55
56export function renderEmptyStateDemo(
57  container: HTMLElement,
58  options?: { height?: string | number; theme?: Theme },
59): SimpleTableVanilla<EmptyEmployee> {
60  return new SimpleTableVanilla(container, {
61    getRowId,
62    columns: emptyStateConfig.headers,
63    rows: emptyStateConfig.rows,
64    height: options?.height ?? "400px",
65    theme: options?.theme,
66    tableEmptyStateRenderer: buildEmptyStateElement(),
67  });
68}
69
70
71// empty-state.demo-data.ts
72// Self-contained demo table setup for this example.
73import type { ColumnDef } from "simple-table-core";
74
75export interface EmptyEmployee {
76  id: number;
77  name: string;
78  email: string;
79  role: string;
80  department: string;
81}
82
83export const emptyStateData: EmptyEmployee[] = [];
84
85export const emptyStateHeaders: ColumnDef<EmptyEmployee>[] = [
86  { accessor: "id", label: "ID", width: 60, type: "number" },
87  { accessor: "name", label: "Name", width: 180, type: "string" },
88  { accessor: "email", label: "Email", width: 220, type: "string" },
89  { accessor: "role", label: "Role", width: 140, type: "string" },
90  { accessor: "department", label: "Department", width: 150, type: "string" },
91];
92
93export const emptyStateConfig = {
94  headers: emptyStateHeaders,
95  rows: emptyStateData,
96};
97

StackBlitz

Props

Empty State Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`tableEmptyStateRenderer` ReactNode \| HTMLElement \| string \| null	Optional	Custom content shown in the table body when there are no rows. Framework adapters accept components or elements; vanilla accepts a string or DOM node. In Angular, prefer an stEmpty template on the table.