| 1 | <h1 align="center">
|
| 2 | use-table-tools
|
| 3 | </h1>
|
| 4 | <p align="center" style="font-size: 1.2rem;">React Hooks for building kickass react table components</p>
|
| 5 |
|
| 6 | [![Build Status][build-badge]][build]
|
| 7 | [![Code Coverage][coverage-badge]][coverage]
|
| 8 | [![MIT License][license-badge]][license]
|
| 9 | [![PRs Welcome][prs-badge]][prs]
|
| 10 | [![gzip size][gzip-badge]][unpkg-lib]
|
| 11 |
|
| 12 | ## Introduction
|
| 13 |
|
| 14 | use-table-tools is a React Hooks library for building kickass react table components.
|
| 15 |
|
| 16 | It features:
|
| 17 |
|
| 18 | - flexbox table with adjustable column configuration
|
| 19 | - checkboxes with multi select
|
| 20 | - client side sorting
|
| 21 | - shifting columns into or off view
|
| 22 | - number of visible columns per screen resolution
|
| 23 |
|
| 24 | ## Quick Start
|
| 25 |
|
| 26 | ```jsx
|
| 27 | import { useTableTools } from 'use-table-tools';
|
| 28 |
|
| 29 | function Table() {
|
| 30 | const { ...utils } = useTableTools({
|
| 31 | layout: [''],
|
| 32 | columns: [],
|
| 33 | totalItems: 0,
|
| 34 | });
|
| 35 |
|
| 36 | return <div>hello from table component</div>;
|
| 37 | }
|
| 38 | ```
|
| 39 |
|
| 40 | ## Usage
|
| 41 |
|
| 42 | [Try it out in the browser](https://codesandbox.io/s/github/davidalekna/data-browser-examples) -->
|
| 43 |
|
| 44 | Inside your React project directory, run the following:
|
| 45 |
|
| 46 | ```
|
| 47 | yarn add use-table-tools
|
| 48 | ```
|
| 49 |
|
| 50 | or with npm
|
| 51 |
|
| 52 | ```
|
| 53 | npm install use-table-tools
|
| 54 | ```
|
| 55 |
|
| 56 | ## API
|
| 57 |
|
| 58 | ### Parameters
|
| 59 |
|
| 60 | ### Return Values
|
| 61 |
|
| 62 | ### Options
|
| 63 |
|
| 64 | ## Global Configuration
|
| 65 |
|
| 66 | ## LICENSE
|
| 67 |
|
| 68 | MIT
|
| 69 |
|
| 70 | [build-badge]: https://travis-ci.org/davidalekna/react-data-browser.svg?style=flat-square
|
| 71 | [build]: https://travis-ci.org/davidalekna/react-data-browser
|
| 72 | [coverage-badge]: https://codecov.io/gh/davidalekna/react-data-browser/branch/master/graph/badge.svg?style=flat-square
|
| 73 | [coverage]: https://codecov.io/gh/davidalekna/react-data-browser
|
| 74 | [license-badge]: https://img.shields.io/npm/l/downshift.svg?style=flat-square
|
| 75 | [license]: https://github.com/davidalekna/react-data-browser/blob/master/LICENSE
|
| 76 | [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
|
| 77 | [prs]: http://makeapullrequest.com
|
| 78 | [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
|
| 79 | [coc]: https://github.com/davidalekna/react-data-browser/blob/master/CODE_OF_CONDUCT.md
|
| 80 | [react-badge]: https://img.shields.io/badge/%E2%9A%9B%EF%B8%8F-(p)react-00d8ff.svg?style=flat-square
|
| 81 | [react]: https://facebook.github.io/react/
|
| 82 | [gzip-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?compression=gzip&label=gzip%20size&style=flat-square
|
| 83 | [size-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?label=size&style=flat-square
|
| 84 | [unpkg-lib]: https://unpkg.com/react-data-browser/lib/
|
| 85 | [use-a-render-prop]: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce
|