Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashiknesin/react-tiny-table
https://github.com/ashiknesin/react-tiny-table
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ashiknesin/react-tiny-table
- Owner: AshikNesin
- Created: 2020-02-25T08:24:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:21:22.000Z (almost 2 years ago)
- Last Synced: 2024-11-08T13:43:08.515Z (9 days ago)
- Language: JavaScript
- Size: 3.38 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-tiny-table
> Simple table library for React
[](https://www.npmjs.com/package/react-tiny-table) [](https://standardjs.com)
## Install
```bash
npm install --save react-tiny-table
```
## Usage
```jsx
import React, { Component } from 'react'
import TinyTable from '@ashiknesin/react-tiny-table'
const columns = [
{
title: 'Subscription Info',
dataIndex: 'subscriptionInfo',
key: 'subscriptionInfo',
fixed: 'left' // To make it fixed (left)
},
{
title: 'Customer Info',
dataIndex: 'customerInfo',
key: 'customerInfo'
},
{
title: 'MRR',
dataIndex: 'mrr',
key: 'mrr'
},
{
title: 'Created On',
dataIndex: 'createdOn',
key: 'createdOn',
fixed: 'right' // To make it fixed (right)
},
{
title: 'Custom Field Right',
dataIndex: 'customField',
key: 'customField'
}
];
const dataset = [
{
subscriptionInfo: 'Ashik Nesin',
customerInfo: 'cloud---entry',
customerEmail: '[email protected]',
customerWebsite: 'https://nesin.io',
nextRenewal: '17 Feb 2020',
mrr: '$50.00 USD',
createdOn: '22 Jan 2020',
customField: 'Demo'
}
];
const data = Array.from({ length: 50 }).map(x => dataset[0]);
class TinyTableDemo extends Component {
render () {
return (
)
}
}
```
## Demo
[Live Demo](https://ashiknesin.github.io/react-tiny-table/)
## Fixed Headers & Columns
- The header is fixed by default
- To a column fixed either left or right. You need to pass `fixed:'right' or fixed: 'left'` property in your columns data set. Please refer to the above example for your reference
## Table Styling
By default table comes with minimal styling which you can override if you want.
## License
MIT © [AshikNesin](https://github.com/AshikNesin)