Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maticzav/ink-table
📐A table component for Ink.
https://github.com/maticzav/ink-table
cli ink ink-table react
Last synced: 4 days ago
JSON representation
📐A table component for Ink.
- Host: GitHub
- URL: https://github.com/maticzav/ink-table
- Owner: maticzav
- Created: 2017-08-19T21:45:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-22T11:37:32.000Z (8 months ago)
- Last Synced: 2024-05-22T16:10:39.477Z (8 months ago)
- Topics: cli, ink, ink-table, react
- Language: TypeScript
- Homepage:
- Size: 1.12 MB
- Stars: 174
- Watchers: 3
- Forks: 29
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-list - ink-table
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: '[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 = () =>
render()
```## Documentation
```ts
type ScalarDict = {
[key: string]: string | number | boolean | null | undefined
}export type TableProps = {
/**
* 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)