Build your first table.

import type { DataTableOptions } from 'wts-data-table';

export interface Project {
  id: string;
  name: string;
  status: string;
  budget: number;
}

export const projects: Project[] = [
  { id: 'p1', name: 'Website redesign', status: 'In progress', budget: 24000 },
  { id: 'p2', name: 'Customer portal', status: 'Planning', budget: 18000 },
  { id: 'p3', name: 'Analytics dashboard', status: 'Complete', budget: 32000 }
];

export const columns: DataTableOptions<Project>['columns'] = [
  { accessor: 'name', header: 'Project' },
  { accessor: 'status', header: 'Status', filterVariant: 'select' },
  { accessor: 'budget', header: 'Budget', dataType: 'number' }
];

import { Component } from '@angular/core';
import {
  WtsDataTableAngularComponent,
  type WtsAngularDataTableOptions
} from '@wts-data-table/angular';
import { columns, projects, type Project } from './table-data';

@Component({
  selector: 'app-project-table',
  standalone: true,
  imports: [WtsDataTableAngularComponent],
  template: `<wts-data-table-angular
    [data]="projects"
    [options]="options"
  />`
})
export class ProjectTableComponent {
  readonly projects = projects;
  readonly options: WtsAngularDataTableOptions<Project> = {
    columns,
    getRowId: row => row.id,
    ariaLabel: 'Project delivery',
    showGlobalFilter: true,
    selectionMode: 'multiple',
    initialState: { pagination: { pageSize: 10 } }
  };
}

const table = new DataTable<Project>({
  element: '#project-table',
  ariaLabel: 'Project delivery',
  data: projects,
  getRowId: (row) => row.id,
  columns: [
    { accessor: 'name', header: 'Project', responsive: 'always' },
    { accessor: 'status', header: 'Status', filterVariant: 'select' },
    { accessor: 'budget', header: 'Budget', dataType: 'number', aggregation: 'sum' }
  ],
  initialState: {
    pagination: { pageSize: 25 },
    sorting: [{ id: 'name', direction: 'asc' }]
  },
  showGlobalFilter: true,
  columnFilters: { mode: 'collapsible' },
  columnMenu: true,
  selectionMode: 'multiple',
  bulkActions: true,
  responsive: { breakpoint: 720, details: 'inline' },
  pagination: { mode: 'pages', showPageJump: true },
  summaryRows: { label: 'Total', columns: { budget: 'sum' }, scope: 'filtered' },
  onStateChange: (state, reason) => console.log(reason, state)
});

const state = table.getState();
const selected = table.getSelectedRows();

table.setGlobalFilter('platform');
table.setSorting([{ id: 'budget', direction: 'desc' }]);
table.setPageSize(50);
table.setData(nextProjects, totalRowCount);
table.applyTransaction({
  add: [newProject],
  update: [{ id: changed.id, data: changed }],
  remove: [deletedId]
});

await table.ready();
await table.destroyAsync();

import { connectDataTableLicense } from 'wts-data-table/license';
import { createRemoteRowModel } from 'wts-data-table/remote';

const license = await connectDataTableLicense({ licenseKey: deploymentKey });
const rows = createRemoteRowModel({
  license,
  origin: window.location.origin,
  ...options
});