1.1.4 • Published 3 years ago
react-next-table v1.1.4
Demo:
Check my website for a live paginated Demo.
Overview:
SmartTable.js is a complete open source solution for React.js applications.
Getting Started:
npm install --save react-next-table
Or
yarn add react-next-table
You also need to install Bootstrap package.
npm install --save bootstrap
Or
yarn add bootstrap
Add the following imports to app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-next-table/dist/SmartTable.css';
This component will be upgraded and updated regularly for better use, in the smallest package with a simple smart set of codes.
Features:
Flexible and easy to use
- Based on Bootstrap for css styling and classes.
- Designed to work with any react project and any react framework like NextJs
- Compatible in all browsers like (chrome, safari, firefox, opera...)
- Supports sorting columns.
- Supports Custom columns.
- Supports search.
- Supports pagination if an api url added for better SEO and user experience.
- Supports external data by props data and internal data by adding the api url.
Props:
prop name | required | options | description |
---|---|---|---|
headCells | true | Array of object | The headCells props tell the component what columns do you want to show from the array and how you want to show it. There are some required object keys: id , label , width (as integer in px); and other options like: sortable (bool), numeric (bool !helps to sort as number!), render (a custom column, html, css, javascript, react !you can do all!) |
data | true if url prop is not used | Array of object | Prerendered data useful if using NextJs framework for server side rendering OR url prop can't be used in your case... |
url | true if data prop is not used | String | fetch data on the component mount if prop data doesn't exist. And on search adding a query param called search , on row number change adding a query param called limit and on page change adding a query param called page . The best news is that they also work as a combination on the this url prop that will work as paginated api |
title | false | String/React component | It's mainly to be a title or a button |
searchDebounceTime | false | Integer default is 800 in (ms) | configure the time you need the search api to start seaching after stop typing in the search box |
noPagination | false | Boolean | |
rowsPerPage | false | Integer default is 10 | |
rowsPerPageOptions | false | array default is 5, 10, 25, 50 |
Example:
Add React Component
import SmartTable from 'react-next-table';
const headCells = [
{
id: 'email',
numeric: false,
label: 'Email',
width: 200,
},
{
id: 'name',
numeric: false,
label: 'Name',
width: 150,
},
{
id: 'phone',
numeric: false,
label: 'Phone',
width: 100,
},
{
id: 'subject',
numeric: false,
label: 'Subject',
width: 300,
},
{
id: 'message',
numeric: false,
label: 'Message',
width: 700,
},
];
const data = [
{
_id: '6144145976c7fe',
email: 'minageres123@gmail.com',
name: 'Mina',
phone: '+9617099995114',
subject: 'test',
message: 'ahlannn',
date: '2021-09-17 19:10:50',
},
{
_id: '6143989f9d87cc',
email: 'as@a.com',
name: 'as',
phone: '+9617646699991',
subject: 'as',
message: 'as',
date: '2021-09-16 22:18:31',
},
{
_id: '614397edc9177d8c8',
email: 'amine@amine.com',
name: 'amine',
phone: '+334343439393993',
subject: '1234',
message: '3434',
date: '2021-09-16 22:15:57',
},
{
_id: '6143be67dfca4985c',
email: 'dominique.amine@gmail.com',
name: 'Dominique',
phone: '+96189904686',
subject: 'Dev ',
message: 'Ohmaga',
date: '2021-09-16 21:33:04',
},
{
_id: '61141e57a7dbd8a189e',
email: 'amineamine19961996@gmail.com',
name: 'amine amine',
phone: '+96176776341',
subject: 'qw',
message: 'qw',
date: '2021-08-11 22:00:39',
},
];
export default function Exemple() {
return <SmartTable title="Emails" data={data} headCells={headCells} />;
}
License
ISC
1.1.4
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.1.2
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.2.16
3 years ago
0.2.15
3 years ago
0.2.14
3 years ago
0.2.13
3 years ago
0.2.12
3 years ago
0.2.11
3 years ago
0.2.17
3 years ago
0.2.1
3 years ago
0.2.7
3 years ago
0.2.6
3 years ago
0.2.8
3 years ago
0.2.3
3 years ago
0.2.10
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.2.0
3 years ago
0.1.0
3 years ago