Table — ARC UI

Components

Table

data

static

<arc-table>

Overview

Guidelines

When to use

Pass columns as a flat array of strings for header labels
Pass rows as an array of arrays, with values in the same order as columns
Enable striped for tables with more than five rows to aid visual tracking
Use compact for data-dense tables like API reference or token listings
Use arc-data-table instead when you need sorting, selection, or column configuration

When not to use

Use arc-table for non-tabular data — use a list or card grid instead
Nest tables — use a single flat table or restructure your data
Use arc-table when you need sortable columns or row selection — use arc-data-table for that
Hardcode HTML table elements inside arc-table — pass data via props instead

Features

Data-driven: pass `columns` and `rows` arrays — no manual `<table>` markup needed
Striped rows via the `striped` boolean for improved visual tracking
Compact mode via the `compact` boolean for dense data displays
Horizontal overflow scrolling for wide tables on narrow viewports
Tektur uppercase headers with letter-spacing for consistent design language
Row hover highlight for interactive feel
CSS parts on wrapper, table, head, body, row, and cell for external customization

Preview

Usage

<arc-table striped
  columns='["Name", "Role", "Status"]'
  rows='[["Alice","Engineer","Active"],["Bob","Designer","Away"]]'
></arc-table>

import { Table } from '@arclux/arc-ui-react';

<Table
  striped
  columns={['Name', 'Role', 'Status']}
  rows={[
    ['Alice', 'Engineer', 'Active'],
    ['Bob', 'Designer', 'Away'],
  ]}
/>

<script setup>
import { Table } from '@arclux/arc-ui-vue';

const columns = ['Name', 'Role', 'Status'];
const rows = [
  ['Alice', 'Engineer', 'Active'],
  ['Bob', 'Designer', 'Away'],
];
</script>

<template>
  <Table striped :columns="columns" :rows="rows" />
</template>

<script>
  import { Table } from '@arclux/arc-ui-svelte';

  const columns = ['Name', 'Role', 'Status'];
  const rows = [
    ['Alice', 'Engineer', 'Active'],
    ['Bob', 'Designer', 'Away'],
  ];
</script>

<Table striped {columns} {rows} />

import { Component } from '@angular/core';
import { Table } from '@arclux/arc-ui-angular';

@Component({
  imports: [Table],
  template: `
    <Table striped [columns]="columns" [rows]="rows" />
  `,
})
export class MyComponent {
  columns = ['Name', 'Role', 'Status'];
  rows = [
    ['Alice', 'Engineer', 'Active'],
    ['Bob', 'Designer', 'Away'],
  ];
}

import { Table } from '@arclux/arc-ui-solid';

const columns = ['Name', 'Role', 'Status'];
const rows = [
  ['Alice', 'Engineer', 'Active'],
  ['Bob', 'Designer', 'Away'],
];

<Table striped columns={columns} rows={rows} />

import { Table } from '@arclux/arc-ui-preact';

const columns = ['Name', 'Role', 'Status'];
const rows = [
  ['Alice', 'Engineer', 'Active'],
  ['Bob', 'Designer', 'Away'],
];

<Table striped columns={columns} rows={rows} />

<!-- Auto-generated by @arclight/prism — do not edit manually -->
<!-- arc-table — requires table.css + tokens.css (or arc-ui.css) -->
<div class="arc-table">
  <div class="table-wrap">
   Table
   </div>
</div>

<!-- Auto-generated by @arclight/prism — do not edit manually -->
<!-- arc-table — self-contained, no external CSS needed -->
<div class="arc-table" style="display: block; color: rgb(138, 138, 150); font-family: 'Host Grotesk', system-ui, sans-serif; font-size: clamp(15px, 1.2vw, 16px)">
  <div style="overflow-x: auto; border: 1px solid rgb(34, 34, 41); border-radius: 14px">
   Table
   </div>
</div>

API

Prop	Type	Default	Description
`columns`	`string[]`	`[]`	Array of column header strings.
`rows`	`string[][]`	`[]`	Array of row arrays. Each inner array contains cell values in column order.
`striped`	`boolean`	`false`	Alternating row backgrounds for improved scanability.
`compact`	`boolean`	`false`	Reduced cell padding for dense data displays.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight