ink-table

A table component for Ink.

Install

npm install @inkkit/ink-table

Usage

import Table from '@inkkit/ink-table'

const data = [
  {
    name: 'Sosa Saunders',
    gender: 'male',
    age: 17,
    email: '[email protected]',
    phone: '+1 (809) 435-2786',
  },
  {
    name: 'Angelina Kirk',
    gender: 'female',
    age: 3,
    email: '[email protected]',
    phone: '+1 (870) 567-3516',
  },
  {
    name: 'Bradford Rosales',
    gender: 'male',
    age: 20,
    email: '[email protected]',
    phone: '+1 (918) 573-3240',
  },
  {
    name: 'Gwen Schroeder',
    gender: 'female',
    age: 17,
    email: '[email protected]',
    phone: '+1 (987) 417-2062',
  },
  {
    name: 'Ellison Mann',
    gender: 'male',
    age: 5,
    email: '[email protected]',
    phone: '+1 (889) 411-2186',
  },
]

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