ink-table

What is ink-table?

The ink-table npm package is used to render tables in Ink applications. Ink is a React-like library for building command-line interfaces (CLIs). ink-table allows you to easily display tabular data in a visually appealing way within your CLI applications.

What are ink-table's main functionalities?

Basic Table Rendering

This feature allows you to render a basic table with rows and columns. The data is passed as an array of objects, where each object represents a row.

const { render } = require('ink');
const Table = require('ink-table').default;
const React = require('react');

const data = [
  { name: 'John Doe', age: 28 },
  { name: 'Jane Doe', age: 26 }
];

render(<Table data={data} />);

Custom Column Headers

This feature allows you to customize the column headers of the table. You can specify the header text and the key that corresponds to the data field.

const { render } = require('ink');
const Table = require('ink-table').default;
const React = require('react');

const data = [
  { name: 'John Doe', age: 28 },
  { name: 'Jane Doe', age: 26 }
];

const columns = [
  { header: 'Full Name', key: 'name' },
  { header: 'Age', key: 'age' }
];

render(<Table data={data} columns={columns} />);

Table with Custom Styles

This feature allows you to apply custom styles to the table. In this example, the table is wrapped in a Box component with a green border.

const { render } = require('ink');
const Table = require('ink-table').default;
const React = require('react');
const { Box } = require('ink');

const data = [
  { name: 'John Doe', age: 28 },
  { name: 'Jane Doe', age: 26 }
];

const CustomTable = () => (
  <Box borderStyle="round" borderColor="green">
    <Table data={data} />
  </Box>
);

render(<CustomTable />);

Other packages similar to ink-table

cli-table

cli-table is a widely-used package for rendering tables in the command line. It offers a lot of customization options for table appearance, including column alignment, padding, and border styles. Compared to ink-table, cli-table is more focused on traditional CLI applications and does not integrate with React-like components.

table

The table package is another popular option for creating tables in the command line. It provides a simple API for defining table data and supports various formatting options. Like cli-table, it is not designed to work with Ink or React-like components, making it less suitable for Ink-based applications.

blessed-contrib

blessed-contrib is a library for building dashboards and other terminal-based UIs. It includes a table component among many other widgets like charts and graphs. While it offers more features than ink-table, it is also more complex and not specifically designed for use with Ink.

README

ink-table

A table component for Ink.

Install

npm install ink-table

Usage

import Table from 'ink-table'

const data = [
  {
    name: 'Sosa Saunders',
    gender: 'male',
    age: 17,
    email: '[e-mail]',
    phone: '[phone]',
  },
  {
    name: 'Angelina Kirk',
    gender: 'female',
    age: 3,
    email: '[e-mail]',
    phone: '[phone]',
  },
  {
    name: 'Bradford Rosales',
    gender: 'male',
    age: 20,
    email: '[e-mail]',
    phone: '[phone]',
  },
  {
    name: 'Gwen Schroeder',
    gender: 'female',
    age: 17,
    email: '[e-mail]',
    phone: '[phone]',
  },
  {
    name: 'Ellison Mann',
    gender: 'male',
    age: 5,
    email: '[e-mail]',
    phone: '[phone]',
  },
]

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

render(<Basic />)

Documentation

type ScalarDict = {
  [key: string]: string | number | boolean | null | undefined
}

export type TableProps<T extends ScalarDict> = {
  /**
   * List of values (rows).
   */
  data: T[]
  /**
   * Columns that we should display in the table.
   */
  columns: (keyof T)[]
  /**
   * Cell padding.
   */
  padding: number
  /**
   * Header component.
   */
  header: (props: React.PropsWithChildren<{}>) => JSX.Element
  /**
   * Component used to render a cell in the table.
   */
  cell: (props: React.PropsWithChildren<{}>) => JSX.Element
  /**
   * Component used to render the skeleton of the table.
   */
  skeleton: (props: React.PropsWithChildren<{}>) => JSX.Element
}

License

MIT © Matic Zavadlal