Skip to content

Commit

Permalink
fix(badge): Add version badge to README
Browse files Browse the repository at this point in the history
  • Loading branch information
maticzav committed May 15, 2018
1 parent e12aa8b commit a330f04
Showing 1 changed file with 60 additions and 25 deletions.
85 changes: 60 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,53 +1,88 @@
# ink-table [![Build Status](https://travis-ci.org/maticzav/ink-table.svg?branch=master)](https://travis-ci.org/maticzav/ink-table)
# ink-table

[![Build Status](https://travis-ci.org/maticzav/ink-table.svg?branch=master)](https://travis-ci.org/maticzav/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

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

## Usage

```jsx
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/>)
{
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 />);
```

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


## Props

#### data `array<object>`
### data `array<object>`

> List of all the values (rows).
#### padding `number`
### padding `number`

> Offset inside each cell. This is considered one side value (set to 2 will have 2 spaces on the left and on the right - 4 combined).
#### header `({children}) => h`
### header `({children}) => h`

> A component used as header cell. Value is passed as `children` prop.
_(Recommend using `<Color/>` with `chalk` props.)_
> _(Recommend using `<Color/>` with `chalk` props.)_
### cell `({children}) => h`

#### cell `({children}) => h`
> A component used as regular cell. Value is passed as `children` prop.
_(Recommend using `<Color/>` with `chalk` props.)_
> _(Recommend using `<Color/>` with `chalk` props.)_
#### skeleton `({children}) => h`
> A component used as skeleton (lines and crosses ...). Value is passed as `children` prop.
_(Recommend using `<Color/>` with `chalk` props.)_
### skeleton `({children}) => h`

> A component used as skeleton (lines and crosses ...). Value is passed as `children` prop.
> _(Recommend using `<Color/>` with `chalk` props.)_
## License

Expand Down

0 comments on commit a330f04

Please sign in to comment.