AdaptTable for Spartan

Right-to-left Spartan data table

Arabic labels and cell values mirror the table, its pager and the filter popover. Pinning uses logical edges, so start is the right edge.

Pass getLabels("ar") to labels and getDirection("ar") to dir. Every table, including nested tables, receives the same presentation settings.

Append ?locale=ar&dir=rtl to any Angular feature page to exercise its real table in Arabic and right-to-left layout.

The code

import { Component, input } from "@angular/core";
import type { ColumnDef } from "@adapttable/angular";
import { getDirection, getLabels } from "@adapttable/i18n";
import { AdaptDataTable } from "@adapttable/spartan";
import { filters } from "@adapttable/spartan/filters";

@Component({
  selector: "app-arabic-people",
  imports: [AdaptDataTable],
  template: `
    <adapt-data-table
      [data]="rows()" [columns]="columns()" [rowKey]="rowKey"
      [dir]="dir" [labels]="labels" [features]="features"
      filtersMode="popover"
    />
  `,
})
export class ArabicPeople {
  readonly rows = input.required<readonly Person[]>();
  readonly columns = input.required<readonly ColumnDef<Person>[]>();
  readonly rowKey = (row: Person) => row.id;
  readonly dir = getDirection("ar");
  readonly labels = getLabels("ar");
  readonly features = [filters([{ key: "name", type: "text", label: "الاسم" }])];
}

Install

# Follow the kit setup guide for compatible peers
pnpm add @adapttable/spartan @adapttable/angular @spartan-ng/brain@1.5.0 @angular/cdk@^22 @angular/forms@^22 rxjs@^7.8.0 tailwindcss@^4 clsx@^2.1.1 tw-animate-css@^1

The same feature in the other kits

More Spartan features

Reference: i18n-rtl. More of this kit: AdaptTable for Spartan, or the live demo.