react-responsive-data-table's Introduction

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
import Table from "react-responsive-data-table";

Example

import Table from 'react-responsive-data-table';

render() {
<Table style={{
    opacity: 0.8,
    backgroundColor: "#00113a",
    color: "#ffffff",
    textAlign: "center"
  }}
  tableStyle="table table-hover table-striped table-bordered table-borderless table-responsive"
  pages={true}
  pagination={true}
  onRowClick={() => {}} // 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.

<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 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)}).

react-responsive-data-table's People

Contributors

Stargazers

Watchers

react-responsive-data-table's Issues

Doesn't work with NextJS

Hey there!

Great library!

Just a heads up that it doesn't work with NextJS though, due to:

https://github.com/miteshtagadiya/react-responsive-data-table/blob/master/src/Table.jsx#L2

Causes this error: https://github.com/vercel/next.js/blob/master/errors/css-npm.md

Can`t map data.data

I tried this:

data:this.state.mesajex.map((list)=>
[
{
data_creare:list.data_creare,
detalii:list.detalii
}
]
)

And is shows loading forever like

filtering and sorting not working for all records.

I have used this data table. When i click on sorting, all records should be sorted. But in this grid sorting is working only on current page.

When i do filtering, it works fine. But the filtered records are not displaying on one page even if pagination limit is more.

For example, if i search "test" and there are 3 records on page 1 and 1 record on page 2 , and my pagination limit is 10, Instead of displaying 4 records on single page it displayed on respective page.

#pagination #react #sort #filter

Recommend Projects