react-datatable-responsive v1.0.12

React DataTable Responsive

It's a datatable component on React. It comes with features like filtering, search, view/hide columns, export to excel file, printing, sorting, selectable rows, pagination, and responsible for mobile/tablet device. On top of the ability to put component, textbox, checkbox, button, img, ... in cells.

Features:

• filtering
• search
• view/hide columns
• export to excel file
• printing
• sorting
• selectable rows
• pagination
• responsible for mobile/tablet
• resizable columns
• component, textbox, checkbox, button, img, and ... in cells

Table of contents

• Install
• Usage
• API
  • ReactDataTable
  • Table Options
  • CSS Classes
• Customize Columns
  • Column
  • Column Options
• Opttions
• License

Install

npm i react-datatable-responsive

Usage

simple table

import ReactDataTable from 'react-datatable-responsive';
import { ColumnType } from 'react-datatable-responsive';

const columns: ColumnType[] = [
  { field: { title: 'title' }, label: 'Title' },
  { field: { title: 'price' }, label: 'Price' },
  { field: { title: 'category' }, label: 'Category' },
]

const data = [
  { title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops", price: 109.95, category: "men's clothing"},
  { title: "Mens Casual Premium Slim Fit T-Shirts ", price: 22.3, category: "men's clothing"},
  { title: "Mens Cotton Jacket", price: 55.99, category: "men's clothing"},
]

export default function Example() {
  return (
    <ReactDataTable rows={data} columns={columns} />
  )
}

custemized columns

import ReactDataTable from 'react-datatable-responsive';
import { ColumnType } from 'react-datatable-responsive';

const columns: ColumnType[] = [
  { field: { title: 'id' }, label: 'ID', options: { display: false } },
  { field: { title: 'title' }, label: 'Title', options: { sort: true } },
  { field: { title: 'price' }, label: 'Price', options: { filter: false, sort: true } },
  { field: { title: 'category' }, label: 'Category', options: { search: false } },
]

const data = [
  { id:1, title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops", price: 109.95, category: "men's clothing"},
  { id:2, title: "Mens Casual Premium Slim Fit T-Shirts ", price: 22.3, category: "men's clothing"},
  { id:3, title: "Mens Cotton Jacket", price: 55.99, category: "men's clothing"},
]

export default function Example(): React.JSX.Element {
  return (
    <ReactDataTable rows={data} columns={columns} />
  )
}

nested objects

import ReactDataTable from 'react-datatable-responsive';
import { ColumnType } from 'react-datatable-responsive';

const columns: ColumnType[] = [
  { field: { title: 'id' }, label: 'ID', options: { display: false } },
  { field: { title: 'firstName' }, label: 'First Name' },
  { field: { title: 'account.username' }, label: 'Username' },
  { field: { title: 'address.home.street' }, label: 'Home Street' },
]

const data = [
  { id:1, firstName:"Anna", account:{username:"annauser"}, address:{home:{street:"24"}}},
  { id:2, firstName:"Lena", account:{username:"lenauser"}, address:{home:{street:"24"}}},
]

export default function Example(): React.JSX.Element {
  return (
    <ReactDataTable rows={data} columns={columns} />
  )
}

API

ReactDataTable

The component accepts the following props:

Table Options

CSS Classes

These class names are useful for styling with CSS. They are applied to the component.

Customize Columns

On each column object, you have the ability to customize columns to your liking with the 'options' property. Example:

const columns = [
 {
  name: "Name",
  options: {
   filter: true,
   sort: false,
   ...
  }
 },
 ...
];

Column:

Column Options:

Options

Change default options

const defaultOptions {
  color: {
    color: '#000',
    backgroundColor: '#fff',
    borderColor: '#ddd'
  },
  download: true,
  filter: true,
  print: true,
  search: true,
  viewColumns: true,
  pagination: true,
  resizableColumns: true,
  responsive: true,
  rowsPerPage: 10,
  rowsPerPageOptions: [5, 10, 20, 50, 100],
  searchPlaceholder: '',
  selectableRowsHideCheckboxes: false,
  cells: {
    imageWidth: 60,
  },
  textLabels: {
    body: {
      title: '',
      noMatch: "Sorry, no data found",
      toolTip: "Sort",
    },
    ...
  }
}

License

The files included in this repository are licensed under the MIT license.