Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/miteshtagadiya/react-responsive-data-table
Responsive Data Table with Searching, Sorting, Pagination
https://github.com/miteshtagadiya/react-responsive-data-table
data-table datatables npm-package pagination react-data-table react-datatable responsive-data-table responsive-table simple-table table
Last synced: 23 days ago
JSON representation
Responsive Data Table with Searching, Sorting, Pagination
- Host: GitHub
- URL: https://github.com/miteshtagadiya/react-responsive-data-table
- Owner: miteshtagadiya
- License: mit
- Created: 2018-06-07T12:34:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-24T19:33:01.000Z (over 4 years ago)
- Last Synced: 2024-09-16T05:28:16.464Z (2 months ago)
- Topics: data-table, datatables, npm-package, pagination, react-data-table, react-datatable, responsive-data-table, responsive-table, simple-table, table
- Language: CSS
- Size: 1.12 MB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-responsive-data-table
[](https://www.npmjs.com/package/react-responsive-data-table)
[](https://www.npmjs.com/package/react-responsive-data-table)
[](https://www.npmjs.com/package/react-responsive-data-table)
Responsive Data Table with Searching, Sorting, Pagination
## Demo
[Click Here](https://miteshtagadiya.github.io/react-responsive-data-table/)
## Installation
1. Install React Table as a dependency
```bash
# NPM
$ npm install react-responsive-data-table
```
2. Import the `react-responsive-data-table` module
```javascript
// ES6
import Table from "react-responsive-data-table";
```
## Example
```jsx
import Table from 'react-responsive-data-table';
render() {
{}} // if You Want Table Row Data OnClick then assign this {row => console.log(row)}
page={true}
errormsg="Error. . ."
loadingmsg="Loading. . ."
isLoading={false}
sort={true}
title="Customers"
search={true}
size={10}
data={{
head: {
id: "ID",
name: "Name",
email: "Email",
created_at: "Created At",
orders: "Orders",
last_order: "Last OrderResponse",
total_spent: "Total Spent"
},
data: [
{
id: 218354810912,
name: "Kattie Wisoky",
email: "[email protected]",
created_at: "2017-11-07T15:14:07.000+0000",
orders: 6,
last_order: "#2233",
total_spent: 0
},
{
id: 218354843680,
name: "Vernon McLaughlin",
email: "[email protected]",
created_at: "2017-11-07T15:14:07.000+0000",
orders: 4,
last_order: "#1287",
total_spent: 0
},
{
id: 218354909216,
name: "Jeffry Harber",
email: "[email protected]",
created_at: "2017-11-07T15:14:07.000+0000",
orders: 2,
last_order: "#2356",
total_spent: 0
}
]
}} />
}
```
## Data
You have to pass data and head objects in data prop. head is for Header.
```javascript
```
## Props
These are all of the available props (and their default values) for the main `` component.
```javascript
{
data={{
head:{},
data:[]
}},
style,
pages: true,
tableStyle: "table class name",
pagination= true,
page= true,
title= "title",
search= true,
size= 10,
errormsg= "Error message",
loadingmsg= "Loading message",
isLoading= false,
sort= true,
onRowClick= {() => {}} //function
}
```
## Props Details
* `data` - You have to pass data and head objects in data prop. head is for Header.
* `tableStyle` - Bootstrap Table class name
* `style` - Style for Table Header
* `pages` - Boolean. Shows Pages Option to display number of records per page.[5,10,20,25,50]
* `pagination` - Boolean. Shows Pagination if true.
* `page` - Boolean. Shows Current page out of total pages if true.
* `title` - String. Title for Table.
* `search` - Boolean. Shows Searchbar if true.
* `size` - Number Of Records that Shows in single page. You can
Onle use 5,10,20,25,50.
* `errormsg` - Error message.(Default is Error. . .)
* `loadingmsg` - Loading message. (Default is Loading. . .)
* `isLoading` - Boolean. Default is false
* `sort` - Boolean. Default is
* `onRowClick` - Function. You can redirect to another page by onRowClick, you can call any function by onRowClick, You can also get Row Data by onRowClick using ({row => console.log(row)}).