https://github.com/webbestmaster/react-table-pro
React Table Pro
https://github.com/webbestmaster/react-table-pro
Last synced: 9 months ago
JSON representation
React Table Pro
- Host: GitHub
- URL: https://github.com/webbestmaster/react-table-pro
- Owner: webbestmaster
- License: mit
- Created: 2020-10-25T19:14:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-17T17:24:45.000Z (over 5 years ago)
- Last Synced: 2025-08-28T08:48:39.836Z (10 months ago)
- Language: JavaScript
- Homepage: http://webbestmaster.github.io/react-table-pro
- Size: 408 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# React Table Pro (7kb gzip)
[](https://travis-ci.org/github/webbestmaster/react-table-pro)
[](https://github.com/webbestmaster/react-table-pro/blob/master/license)
[](https://www.npmjs.com/package/react-table-pro)
[](https://github.com/webbestmaster/react-table-pro/)
**[Live demo](http://webbestmaster.github.io/react-table-pro)**
## Install
```bash
npm i react-table-pro
```
### Typing Flow
Use `./flow-typed/react-table-pro.js`.
### Typing TypeScript
Use `./@types/index.d.ts`.
## Usage example
```javascript
// @flow
import React, {type Node} from 'react';
import {Table} from 'react-table-pro';
import reactTableProStyle from 'react-table-pro/dist/style.css';
import type {
SortDirectionType,
TableGetDataResultType,
TableBodyCellType,
TablePropsType,
TableGetDataType,
TableHeaderType,
TableHeaderCellType,
TableCellAlignType,
} from 'react-table-pro';
type ApiResultType = {
// ApiResultType are equals for TableBodyCellType for example only
// you can use your own structure api's data
+[key: string]: string | number | boolean | Node,
};
// your own function to fetch data
export function getDataList(
pageIndex: number, // page index started from 0
rowsPerPage: number, // number of items in response
sortBy: string, // id of field
order: SortDirectionType // asc or desc
): Promise> {
const query = `page=${pageIndex + 1}&limit=${rowsPerPage}&sortBy=${sortBy}&order=${order}`;
// you should catch api's error here :)
return (
fetch('https://5f9704ad11ab98001603b694.mockapi.io/user?' + query)
// $FlowFixMe
.then((data: Response): Promise> => data.json())
);
}
const tableHeader: TableHeaderType = {
// title of table, string, required
title: 'User list',
// list of column descriptions, required
columnList: [
{
// unique field name in ApiResultType, string, required
id: 'id',
// aling of content, type TableCellAlignType = left | center | right, required
align: 'left',
// column's name, string, required
label: 'Id',
// can or can't sort by this field id, boolean, required
hasSort: false,
},
{id: 'isAdmin', align: 'center', label: 'Is admin', hasSort: true},
{id: 'login', align: 'right', label: 'Login', hasSort: true},
],
};
async function tableGetUserList(
pageIndex: number, // page index started from 0
rowsPerPage: number, // number of items in response
sortBy: string, // id of field
order: SortDirectionType, // string: 'asc' | 'desc'
refreshTable: () => Promise // you can save and call this function to refresh table
): Promise {
const dataList: Array = await getDataList(pageIndex, rowsPerPage, sortBy, order);
return {
// all elements number, number, required
count: 50,
// Array of table cell data, Array, required
list: dataList,
};
}
export function App(): Node {
return (
);
}
```