# ink-table

> A table component for Ink.

Latest version **3.1.0** (published 2023-12-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install ink-table
pnpm add ink-table
yarn add ink-table
bun add ink-table
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2023-12-06 |
| First published | 2017-08-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 227 |
| Author | Matic Zavadlal |
| Maintainers | maticzav |
| Keywords | cli, ink-cli, ink, table, ink-table, ink-component, component |

## Links

- npm: https://www.npmjs.com/package/ink-table
- Repository: https://github.com/maticzav/ink-table
- Homepage: https://github.com/maticzav/ink-table#readme
- Issues: https://github.com/maticzav/ink-table/issues
- npm.io page: https://npm.io/package/ink-table

## Dependencies (1)

- [object-hash](https://npm.io/package/object-hash.md) ^2.0.3

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2023-12-06
- 3.0.0 — 2020-11-06
- 2.0.1 — 2019-06-13
- 2.0.0 — 2019-06-04
- 1.0.3 — 2018-05-17
- 1.0.2 — 2018-05-15
- 1.0.1 — 2018-05-15
- 1.0.0 — 2018-05-15
- 0.0.3 — 2017-08-22
- 0.0.2 — 2017-08-20
- 0.0.1 — 2017-08-19
- 0.0.0 — 2017-08-19

## README

# ink-table

[![npm version](https://badge.fury.io/js/ink-table.svg)](https://badge.fury.io/js/ink-table)

> A table component for [Ink](https://github.com/vadimdemedes/ink).

## Install

```bash
npm install ink-table
```

## Usage

```jsx
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',
  },
  {
    name: 'Bradford Rosales',
    gender: 'male',
    age: 20,
    email: 'bradfordrosales@fast.com',
    phone: '+1 (918) 573-3240',
  },
  {
    name: 'Gwen Schroeder',
    gender: 'female',
    age: 17,
    email: 'gwen@corp.xyz',
    phone: '+1 (987) 417-2062',
  },
  {
    name: 'Ellison Mann',
    gender: 'male',
    age: 5,
    email: 'ellisonmann@katakana.com',
    phone: '+1 (889) 411-2186',
  },
]

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

render(<Basic />)
```

<img src="media/demo.png" width="720">

## Documentation

```ts
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](http://github.com/maticzav)

---
_Source: https://npm.io/package/ink-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._