# 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, Latest version **1.0.12** (published 2024-08-21) · MIT license · 0 weekly downloads ## Install ```sh npm install react-datatable-responsive pnpm add react-datatable-responsive yarn add react-datatable-responsive bun add react-datatable-responsive ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.12 | | Published | 2024-08-21 | | First published | 2024-02-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 354.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Alireza Mirahmadi | | Maintainers | alireza.mirahmadi | | Keywords | react, data table, responsive, typescript, table | ## Links - npm: https://www.npmjs.com/package/react-datatable-responsive - Repository: https://github.com/alirezamirahmadi/react-datatable-responsive - Issues: https://github.com/alirezamirahmadi/react-datatable-responsive/issues - npm.io page: https://npm.io/package/react-datatable-responsive ## Dependencies (3) - [react](https://npm.io/package/react.md) ^18.2.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [react-to-print](https://npm.io/package/react-to-print.md) ^2.15.1 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 1.0.12 (latest) — 2024-08-21 - 1.0.11 — 2024-07-16 - 1.0.10 — 2024-07-11 - 1.0.9 — 2024-06-06 - 1.0.8 — 2024-02-22 - 1.0.7 — 2024-02-22 - 1.0.6 — 2024-02-21 - 1.0.5 — 2024-02-19 - 1.0.4 — 2024-02-12 - 1.0.3 — 2024-02-12 - 1.0.2 — 2024-02-11 - 1.0.1 — 2024-02-11 - 1.0.0 — 2024-02-11 ## README #

React DataTable Responsive

typescript react

![NPM Downloads](https://img.shields.io/npm/dw/react-datatable-responsive) ![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/react-datatable-responsive) ![NPM Version](https://img.shields.io/npm/v/react-datatable-responsive) ![react-datatable-responsive](https://github.com/alirezamirahmadi/react-datatable-responsive/assets/155379176/a4bf38fb-796e-4fc0-8d5a-9d49db17abd2) ### 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 ![component](https://github.com/alirezamirahmadi/react-datatable-responsive/assets/155379176/98a6ea3e-150b-4581-b032-ca2ad2b97088) ## Table of contents - [Install](#install) - [Usage](#usage) - [API](#api) - [ReactDataTable](#reactdatatable) - [Table Options](#table-options) - [CSS Classes](#css-classes) - [Customize Columns](#customize-columns) - [Column](#column) - [Column Options](#column-options) - [Opttions](#options) - [License](#license) ## Install `npm i react-datatable-responsive` ## Usage #### simple table ``` js 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 ( ) } ``` #### custemized columns ``` js 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 ( ) } ``` #### nested objects ``` js 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 ( ) } ``` ## API #### ReactDataTable #### The component accepts the following props: |Name|Type|Description |:--:|:-----|:-----| |**`direction`**|lrt \| rtl \| inherit|Direction used to describe direction of table. |**`columns`**|array|Columns used to describe table. Must be either an array of simple strings or objects describing a column. (This field is required) |**`rows`**|array|Rows used to describe table. Must be either an array containing objects of key/value pairs. (This field is required) |**`options`**|object|Options used to describe table. #### Table Options |Name|Type|Default|Description |:--:|:-----|:--|:-----| |**`cells`**|object||User provided items in cells. [Example](https://github.com/alirezamirahmadi/React-DataTable/blob/master/examples/Example-Button/ExampleButton.tsx) |**`color`**|object||User provided colors to customized table. [Example](https://github.com/alirezamirahmadi/React-DataTable/blob/master/examples/Example-Options/ExampleOptions.tsx) |**`download`**|boolean|true|Show/hide download icon from toolbar. Possible values:

  • true: Button is visible and clickable.
  • false: Button is not visible.

|**`filter`**|boolean|true|Show/hide filter icon from toolbar. Possible values:

  • true: Button is visiable and clickable.
  • false: Button is not visible.

|**`onRowClick`**|function||Callback function that triggers when a row is clicked. `function(rowData: any) => void` |**`onRowsDelete`**|function||Callback function that triggers when row(s) are deleted. `function(rowsDeleted: any[]) => void` |**`pagination`**|boolean|true|Show/hide pagination. |**`print`**|boolean|true|Show/hide print icon from toolbar. Possible values:

  • true: Button is visiable and clickable.
  • false: Button is not visible.

|**`resizableColumns`**|boolean|true|Enable/disable resizable columns. |**`responsive`**|boolean|true|Enable/disable responsive table. |**`rowsPerPage`**|number|10|Number of rows allowed per page. |**`rowsPerPageOptions`**|array|[5,10,20,50,100]|Options to provide in pagination for number of rows a user can select. |**`search`**|boolean|true|Show/hide search icon from toolbar. Possible values:

  • true: Button is visiable and clickable.
  • false: Button is not visible.

|**`searchPlaceholder`**|string||Search text placeholder. |**`selectableRowsHideCheckboxes`**|boolean|false|Hides the checkboxes that appear when selectableRows is set to "multiple" or "single". Can provide a more custom UX, especially when paired with selectableRowsOnClick. |**`textLabels`**|object||User provided labels to localize text. |**`viewColumns`**|boolean|true|Show/hide viewColumns icon from toolbar. Possible values:

  • true: Button is visiable and clickable.
  • false: Button is not visible.

#### CSS Classes These class names are useful for styling with CSS. They are applied to the component. |Name|Description |:--:|:-----| |**`rdtdatatable`**|Styles applied to the data table| |**`rdtmenu-main`**|Styles applied to the menu box| |**`rdtmenu-select`**|Styles applied to the select menu box| |**`rdtmenu-title`**|Styles applied to the caption table| |**`rdtfilter`**|Styles applied to the filter box| |**`rdtfilter__title`**|Styles applied to the title of the filter box| |**`rdtfilter-item`**|Styles applied to the filter items box| |**`rdtfilter-column`**|Styles applied to the columns select tag | |**`rdtfilter-column__option`**|Styles applied to options of the columns select tag| |**`rdtfilter-condition`**|Styles applied to the conditions select tag| |**`rdtfilter-condition__option`**|Styles applied to options of conditions select tag| |**`rdtfilter-item__text`**|Styles applied to the input on the filter box| |**`rdtfilter__add`**|Styles applied to the add button on the filter box| |**`rdtfilter-list`**|Styles applied to the filter list box| |**`rdtfilter-list__li`**|Styles applied to the filter list item| |**`rdtfilter-list__remove`**|Styles applied to the remove button on filter list item| |**`rdtsearch`**|Styles applied to the search box| |**`rdtsearch__input`**|Styles applied to the input on search box| |**`rdtsearch__close`**|Styles applied to the close button on search box| |**`rdtshowcolumn`**|Styles applied to the show column box| |**`rdtshowcolumn__title`**|Styles applied to the caption show column box| |**`rdtshowcolumn__li`**|Styles applied to the list columns on show column box| |**`rdtshowcolumn__label`**|Styles applied to the label list columns on show column box| |**`rdttable`**|Styles applied to the table| |**`rdttable-nodata`**|Styles applied to the no data alert| |**`rdttable-header__label`**|Styles applied to the header label| |**`rdtcell-input`**|Styles applied to the input in cells| |**`rdtcell-textarea`**|Styles applied to the textarea in cells| |**`rdtcell-image`**|Styles applied to the image in cells| |**`rdtcell-checkbox`**|Styles applied to the checkbox in cells| |**`rdtcell-text`**|Styles applied to the text in cells| |**`rdtcell-progress`**|Styles applied to the progress in cells| |**`rdtcell-select`**|Styles applied to the to select in cells| |**`rdtcell-select__option`**|Styles applied to options in select| |**`rdtcell-button`**|Styles applied to the button in cells| |**`rdtpagination`**|Styles applied to the pagination box| |**`rdtpagination-pages`**|Styles applied to the number pagination box| |**`rdtpagination-pages__no`**|Styles applied to the number pagination| |**`rdtpagination-pages__no--select`**|Styles applied to the current page no| |**`rdtpagination-per-page`**|Styles applied to the per page select| ## Customize Columns On each column object, you have the ability to customize columns to your liking with the 'options' property. Example: ```js const columns = [ { name: "Name", options: { filter: true, sort: false, ... } }, ... ]; ``` #### Column: |Name|Type|Description |:--:|:-----|:-----| |**`field`**|object|Title of column (This field is required) and function to handle cell event |**`label`**|string|Column Header Name (This field is required) |**`kind`**|input/textbox \| input/date \| input/datetime-local \| input/number \| input/file \| input/password \| textarea \| button \| image \| boolean \| select \| progress \| component,|kind of column |**`options`**|object|Options for customizing column |**`eventHandlerHeader`**|function|function to handle column event #### Column Options: |Name|Type|Default|Description |:--:|:-----|:--|:-----| |**`component`**|function||Function that returns a React component. Used to display data within all table cells of a given column. [Example](https://github.com/alirezamirahmadi/React-DataTable/blob/master/examples/Example-Component/ExampleComponent.tsx) |**`display`**|boolean|true|Display column in table. Possible values:

  • true: Column is visible and toggleable via the View Columns popover in the Toolbar.
  • false: Column is not visible but can be made visible via the View Columns popover in the Toolbar.

[Example](https://github.com/alirezamirahmadi/React-DataTable/blob/master/examples/Example-Column-Options/ExampleColumnOptions.tsx) |**`filter`**|boolean|true|Display column in filter list.[Example](https://github.com/alirezamirahmadi/React-DataTable/blob/master/examples/Example-Column-Options/ExampleColumnOptions.tsx) |**`search`**|boolean|true|Exclude/include column from search results.[Example](https://github.com/alirezamirahmadi/React-DataTable/blob/master/examples/Example-Column-Options/ExampleColumnOptions.tsx) |**`sort`**|boolean|false|Enable/disable sorting on column.[Example](https://github.com/alirezamirahmadi/React-DataTable/blob/master/examples/Example-Column-Options/ExampleColumnOptions.tsx) ## Options #### Change default options ``` js 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. --- _Source: https://npm.io/package/react-datatable-responsive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._