react-responsive-data-table
Responsive Data Table with Searching, Sorting, Pagination
Demo
Installation
- Install React Table as a dependency
# NPM $ npm install react-responsive-data-table
- Import the
react-responsive-data-table
module
// ES6;
Example
import Table from 'react-responsive-data-table'; {<Table = ="table table-hover table-striped table-bordered table-borderless table-responsive" = = = // = ="Error. . ." ="Loading. . ." = = ="Customers" = = = /> }
Data
You have to pass data and head objects in data prop. head is for Header.
<Table data=head:{}data:/>
Props
These are all of the available props (and their default values) for the main <Table />
component.
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 namestyle
- Style for Table Headerpages
- 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 falsesort
- Boolean. Default isonRowClick
- 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)}).