ink-table

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