Table

Data-driven table with striped and compact-density variants, powered by columns and rows props.

Components

Table

data

static

<arc-table>

Overview

Table renders a fully styled data table from two simple props: `columns` (an array of header strings) and `rows` (an array of arrays, one per row). All markup is generated inside the shadow DOM, so headers, cells, striping, and hover states are styled consistently without any slotted HTML duplication. The `striped` prop adds alternating row backgrounds for improved scanability, and `density="compact"` reduces padding for data-dense displays. The wrapper applies `overflow-x: auto` for responsive horizontal scrolling on narrow viewports. CSS parts are exposed on every structural element for external customization.

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 density="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

Do not use arc-table for non-tabular data — use a list or card grid instead
Do not nest tables — use a single flat table or restructure your data
Do not use arc-table when you need sortable columns or row selection — use arc-data-table for that
Do not 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 `density="compact"` boolean for dense data displays
Horizontal overflow scrolling for wide tables on narrow viewports
Tomorrow 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

Component	Tier	Status
Button	Input	Stable
Card	Content	Stable
Modal	Feedback	Beta
DatePicker	Input	Experimental

Usage

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

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

export default function Example() {
  return (
    <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: `
    <arc-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 @arclux/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 @arclux/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

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.
density 'default' | 'compact' ='default': Row density. 'compact' reduces cell padding for dense data displays.

Table

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight