{"id":28089350,"url":"https://github.com/ashvin27/react-datatable","last_synced_at":"2025-05-13T12:57:16.605Z","repository":{"id":33780990,"uuid":"161767265","full_name":"ashvin27/react-datatable","owner":"ashvin27","description":"React-datatable is a component which provide ability to create multifunctional table using single component like jQuery Datatable. It's fully customizable and easy to integrate in any react component. Bootstrap compatible.","archived":false,"fork":false,"pushed_at":"2025-04-23T07:17:18.000Z","size":7835,"stargazers_count":80,"open_issues_count":30,"forks_count":46,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-23T08:25:28.645Z","etag":null,"topics":["data","datatables","datatables-plugin","react","react-data-table","react-datagrid","react-datatable","react-table","table"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ashvin27.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-14T10:11:02.000Z","updated_at":"2025-04-23T07:17:23.000Z","dependencies_parsed_at":"2023-01-15T02:30:42.082Z","dependency_job_id":"23bec6ea-4a61-40c6-aa5c-1468637d914c","html_url":"https://github.com/ashvin27/react-datatable","commit_stats":{"total_commits":103,"total_committers":9,"mean_commits":"11.444444444444445","dds":0.5825242718446602,"last_synced_commit":"70586781f38fefe4d613e4e1416d3153adbb22f5"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashvin27%2Freact-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashvin27%2Freact-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashvin27%2Freact-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashvin27%2Freact-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashvin27","download_url":"https://codeload.github.com/ashvin27/react-datatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948346,"owners_count":21988953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data","datatables","datatables-plugin","react","react-data-table","react-datagrid","react-datatable","react-table","table"],"created_at":"2025-05-13T12:57:16.037Z","updated_at":"2025-05-13T12:57:16.592Z","avatar_url":"https://github.com/ashvin27.png","language":"JavaScript","readme":"# react-datatable\n\n[![npm version](https://img.shields.io/npm/v/@ashvin27/react-datatable.svg)](https://www.npmjs.com/package/@ashvin27/react-datatable)\n[![Known Vulnerabilities](https://snyk.io/test/github/ashvin27/react-datatable/badge.svg?targetFile=package.json)](https://snyk.io/test/github/ashvin27/react-datatable?targetFile=package.json)\n\nReactDatatable is a component which provide ability to create multifunctional table using single component like jQuery Datatable. It's fully customizable and easy to integrate in any react component. Bootstrap compatible.\n\n## Features\n* Lightweight\n* Fully customizable (JSX, templates, state, styles, callbacks)\n* Client-side \u0026 Server Side Pagination\n* Multi-sort\n* Filters\n* Minimal design\n* Fully controllable via optional props and callbacks\n\n## Example\n[http://react-datatable.in/](http://react-datatable.in/)\n\n## Installation\nWith [npm](https://npmjs.org/) installed, run\n```\nnpm i @ashvin27/react-datatable\n```\n\n## Usage\n\n```js\nimport React, { Component, Fragment } from 'react';\nimport { render} from 'react-dom';\nimport ReactDatatable from '@ashvin27/react-datatable';\n\nclass App extends Component {\n    constructor(props) {\n        super(props);\n        this.columns = [\n            {\n                key: \"name\",\n                text: \"Name\",\n                className: \"name\",\n                align: \"left\",\n                sortable: true,\n            },\n            {\n                key: \"address\",\n                text: \"Address\",\n                className: \"address\",\n                align: \"left\",\n                sortable: true\n            },\n            {\n                key: \"postcode\",\n                text: \"Postcode\",\n                className: \"postcode\",\n                sortable: true\n            },\n            {\n                key: \"rating\",\n                text: \"Rating\",\n                className: \"rating\",\n                align: \"left\",\n                sortable: true\n            },\n            {\n                key: \"type_of_food\",\n                text: \"Type of Food\",\n                className: \"type_of_food\",\n                sortable: true,\n                align: \"left\"\n            },\n            {\n                key: \"action\",\n                text: \"Action\",\n                className: \"action\",\n                width: 100,\n                align: \"left\",\n                sortable: false,\n                cell: record =\u003e { \n                    return (\n                        \u003cFragment\u003e\n                            \u003cbutton\n                                className=\"btn btn-primary btn-sm\"\n                                onClick={() =\u003e this.editRecord(record)}\n                                style={{marginRight: '5px'}}\u003e\n                                \u003ci className=\"fa fa-edit\"\u003e\u003c/i\u003e\n                            \u003c/button\u003e\n                            \u003cbutton \n                                className=\"btn btn-danger btn-sm\" \n                                onClick={() =\u003e this.deleteRecord(record)}\u003e\n                                \u003ci className=\"fa fa-trash\"\u003e\u003c/i\u003e\n                            \u003c/button\u003e\n                        \u003c/Fragment\u003e\n                    );\n                }\n            }\n        ];\n        this.config = {\n            page_size: 10,\n            length_menu: [ 10, 20, 50 ],\n            button: {\n                excel: true,\n                print: true,\n                extra: true,\n            }\n        }\n        \n        this.state = {\n            records: [\n              {\n                \"id\": \"55f14312c7447c3da7051b26\",\n                \"address\": \"228 City Road\",\n                \"name\": \".CN Chinese\",\n                \"postcode\": \"3JH\",\n                \"rating\": 5,\n                \"type_of_food\": \"Chinese\"\n              },\n              {\n                \"id\": \"55f14312c7447c3da7051b27\",\n                \"address\": \"376 Rayleigh Road\",\n                \"name\": \"@ Thai\",\n                \"postcode\": \"5PT\",\n                \"rating\": 5.5,\n                \"type_of_food\": \"Thai\"\n              },\n              {\n                \"id\": \"55f14312c7447c3da7051b28\",\n                \"address\": \"30 Greyhound Road Hammersmith\",\n                \"name\": \"@ Thai Restaurant\",\n                \"postcode\": \"8NX\",\n                \"rating\": 4.5,\n                \"type_of_food\": \"Thai\"\n              },\n              {\n                \"id\": \"55f14312c7447c3da7051b29\",\n                \"address\": \"30 Greyhound Road Hammersmith\",\n                \"name\": \"@ Thai Restaurant\",\n                \"postcode\": \"8NX\",\n                \"rating\": 4.5,\n                \"type_of_food\": \"Thai\"\n              }\n            ]\n        }\n        this.extraButtons =[\n            {\n                className:\"btn btn-primary buttons-pdf\",\n                title:\"Export TEst\",\n                children:[\n                    \u003cspan\u003e\n                    \u003ci className=\"glyphicon glyphicon-print fa fa-print\" aria-hidden=\"true\"\u003e\u003c/i\u003e\n                    \u003c/span\u003e\n                ],\n                onClick:(event)=\u003e{\n                    console.log(event);\n                },\n            },\n            {\n                className:\"btn btn-primary buttons-pdf\",\n                title:\"Export TEst\",\n                children:[\n                    \u003cspan\u003e\n                    \u003ci className=\"glyphicon glyphicon-print fa fa-print\" aria-hidden=\"true\"\u003e\u003c/i\u003e\n                    \u003c/span\u003e\n                ],\n                onClick:(event)=\u003e{\n                    console.log(event);\n                },\n                onDoubleClick:(event)=\u003e{\n                    console.log(\"doubleClick\")\n                }\n            },\n        ]\n    }\n\n    editRecord(record) {\n        console.log(\"Edit Record\", record);\n    }\n\n    deleteRecord(record) {\n        console.log(\"Delete Record\", record);\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cReactDatatable\n                    config={this.config}\n                    records={this.state.records}\n                    columns={this.columns}\n                    extraButtons={this.extraButtons}\n                /\u003e\n            \u003c/div\u003e\n        )\n    }\n}\n\nrender(\u003cApp /\u003e, document.getElementById(\"app\"));\n```\n\n# API\n\n```js\nimport ReactDatatable from '@ashvin27/react-datatable';\nor\nvar ReactDatatable = require('@ashvin27/react-datatable')\n```\n## Props\n| Name  | Type | Description\n| ------------- | ------------- | ------------- |\n| className  | String  | Datatable additional class, use to appy additional styling on table\n| tHeadClassName | String | Additional class to be put on the \"thead\"  of the table\n| columns  | Object[]  | This props will used to specify datatable column configuration\n| config  | Object[]  | This props will used to specify datatable configuration\n| dynamic |  boolean |  This props will used to specify the table data will be server side or static\n| id  | String  | Identifier of datatable\n| records  | Object[]  | This props will used to table records\n| total_record | Number | This props will used to specify the total records in case of table data is server side.\n| onChange | Function(Object) | This method will call on table actions(page change, sorting, filtering, page length change)\n| onRowClicked | Function(Object) | This method will call when user click on a row, return row object.\n| extraButtons | Object[] | This props will add custom extra buttons to the table tools in the top right of the table header next to the built in export buttons\n| onSort | function(String, Object[], String) | This props will allow you to sort your data/records using any custom sort function. Or according to you if you don't want to use default sort function provided by the Library.\n| loading | Boolean(default false) | This props will allow you to display a loading in table while data is fetching from the server.\n\n## Options\n| Name  | Type | default | Description\n| ------------- | ------------- | ------------- | ------------- |\n| key_column | string | id | Use to specify the key column name for each record\n| button  | Object[]  | { excel: false, print: false, csv: false } | Use to enable/disable export buttons(Excel, CSV, Print). By default buttons are disabled.\n| filename  | String  | \"table\" | Specify the export filename\n| length_menu  | Array[]  | [10, 25, 50, 75, 100]  | Specify the options in the page length `select` list.\n| page_size  | Number  | 10  | Specify the page length (number of rows per page)\n| sort  | Object[]  | { column: \"\", order: \"asc\" } | Initial sorting order to apply to the datatable\n| show_filter | boolean | true | Use to specify either show or hide filter option\n| show_first | boolean | true | Use to specify either show or hide pagination first button\n| show_info | boolean | true |  Use to specify either show or hide pagination info\n| show_last | boolean | true | Use to specify either show or hide pagination last button\n| show_length_menu | boolean | true | Use to specify either show or hide page length menu\n| show_pagination | boolean | true | Use to specify either show or hide pagination\n| pagination | string | basic | Use to specify the type of pagination. Available types: basic/advance\n\n## Columns\n| Name  | Type | default | Description\n| ------------- | ------------- | ------------- | ------------- |\n| align  | String  |  left | Specify the content alignment\n| className  | String  |   | Table column additional class fo styling (only for data columns use TrOnlyClassName for headers)\n| TrOnlyClassName | String |  | Header column additional class ( only for headers ) WILL NOT automatically take className value if not set\n| key  | String  |   | Specify the key of record which value will display in table cell\n| sortable  | Boolean  |  false | Specify the column is sortable of not\n| text  | String  |   | Specify the table column text\n| width  | Number  |   | Specify the column width\n| cell  | Function(record, index):string  |   | You can use any react component or JSX to display content in cells\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashvin27%2Freact-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashvin27%2Freact-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashvin27%2Freact-datatable/lists"}