Table

A data table component with ASCII borders for displaying structured information.

Installation

npm install react-ascii-ui

Usage

import { AsciiTable } from 'react-ascii-ui';

const data = [
  { id: '001', name: 'Alice', role: 'Developer' },
  { id: '002', name: 'Bob', role: 'Designer' }
];

const columns = [
  { key: 'id', header: 'ID', width: '20%' },
  { key: 'name', header: 'Name', width: '40%' },
  { key: 'role', header: 'Role', width: '40%' }
];

export default function Example() {
  return (
    <AsciiTable 
      data={data}
      columns={columns}
      caption="User Table"
    />
  );
}

Examples

<AsciiTable 
  data={[
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 }
  ]}
  columns={[
    { key: 'name', header: 'Name' },
    { key: 'age', header: 'Age', align: 'right' }
  ]}
/>

<AsciiTable 
  data={data}
  columns={columns}
  caption="[ EMPLOYEES ]"
/>

<AsciiTable 
  data={[]}
  columns={columns}
  caption="[ NO DATA ]"
/>

API Reference

Props

AsciiTableColumn

AsciiTable extends all HTML div attributes and React.HTMLAttributes<HTMLDivElement>.