DOCSEARCHbyAlgolia
Submit Docs

ink-table

repository·master·Indexed 42 days ago

https://github.com/maticzav/ink-table

A table component for Ink that allows developers to render structured data tables in terminal interfaces. It features automatic column width calculation and supports customization via TableProps, including custom header, cell, and skeleton components.

Tokens
1.4K
Snippets
5
Records
7
Agent score
3%

What's inside ink-table

  2. Basic usage of the Table component

    master

    To render a basic table, import the Table component and pass an array of objects to the data prop. Each object in the array represents a row in the table.

    import Table from 'ink-table'

const data = [
  {
    name: 'Sosa Saunders',
    gender: 'male',
    age: 17,
    email: 'sosa.saunders@mail.com',
    phone: '+1 (809) 435-2786',
  },
  {
    name: 'Angelina Kirk',
    gender: 'female',
    age: 3,
    email: 'angelina@kirk.io',
    phone: '+1 (870) 567-3516',
  },
]

const Basic = () => <Table data={data} />

render(<Basic />)

  3. Configure TableProps for ink-table

    master

    The Table component accepts a TableProps<T> object where T is a ScalarDict (an object containing only string, number, boolean, null, or undefined values).

    Use these props to customize the table's structure and appearance:

    • data: An array of objects (T[]) representing the rows.
    • columns: An array of keys ((keyof T)[]) specifying which fields from the data objects should be displayed as columns.
    • padding: A number defining the cell padding.
    • header: A custom component used to render the table header.
    • cell: A custom component used to render individual cells.
    • skeleton: A custom component used to render the table's skeleton/structure.
    type ScalarDict = {
  [key: string]: string | number | boolean | null | undefined
}

export type TableProps<T extends ScalarDict> = {
  data: T[]
  columns: (keyof T)[]
  padding: number
  header: (props: React.PropsWithChildren<{}>) => JSX.Element
  cell: (props: React.PropsWithChildren<{}>) => JSX.Element
  skeleton: (props: React.PropsWithChildren<{}>) => JSX.Element
}

  4. Use the Table component to render data in Ink

    master

    The Table component is the primary entry point for rendering data tables in a terminal using Ink. It accepts an array of data objects and automatically calculates column widths based on the content. You can customize the appearance by providing your own header, cell, and skeleton components, as well as adjusting padding.

    import React from 'react';
import { render } from 'ink';
import Table from 'ink-table';

const data = [
  { id: 1, name: 'Alice', role: 'Admin' },
  { id: 2, name: 'Bob', role: 'User' },
];

const App = () => (
  <Table
    data={data}
    columns={['id', 'name', 'role']}
    padding={1}
  />
);

render(<App />);

  5. Use default helper components: Header, Cell, and Skeleton

    master

    The library exports three default components used for styling the table structure:

    • Header: Renders text in bold and blue. Used for the top header row.
    • Cell: A simple wrapper that renders the provided children as standard Text.
    • Skeleton: Renders text in bold. Used for drawing the table borders and lines (e.g., ┌, ─, │).

  6. Configure TableProps for the Table component

    master

    The Table component is generic and expects a type T that extends ScalarDict (an object where values are string | number | boolean | null | undefined).

    Props

    PropTypeDescription
    dataT[]Required. The list of row objects to display.
    columns(keyof T)[]Optional. The keys of T to be displayed as columns. If omitted, all keys found in the data are used.
    paddingnumberOptional. Cell padding (default: 1).
    header(props: React.PropsWithChildren<{}>) => JSX.ElementOptional. Component to render the header row. Defaults to Header.
    cell(props: CellProps) => JSX.ElementOptional. Component to render individual cells. Defaults to Cell.
    skeleton(props: React.PropsWithChildren<{}>) => JSX.ElementOptional. Component to render the table borders/lines. Defaults to Skeleton.

  7. Customize cells with CellProps

    master

    When providing a custom cell component to the Table, you can use the CellProps type to access the current column index. This allows you to apply conditional styling or logic based on the column position.

    import type { CellProps } from 'ink-table';

const CustomCell = ({ column, children }: CellProps) => {
  // column is the 0-based index of the column
  return (
    <Text color={column === 0 ? 'green' : 'white'}>
      {children}
    </Text>
  );
};

// Usage in Table:
// <Table cell={CustomCell} ... />