{"id":38735495,"url":"https://github.com/flipbyte/redux-datatable","last_synced_at":"2026-01-17T11:30:40.180Z","repository":{"id":34080205,"uuid":"170471060","full_name":"flipbyte/redux-datatable","owner":"flipbyte","description":"Datatable for react-redux","archived":false,"fork":false,"pushed_at":"2023-04-30T10:54:59.000Z","size":2746,"stargazers_count":4,"open_issues_count":11,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-03T15:40:08.445Z","etag":null,"topics":["data-table","datatable","react","react-datatable","redux","redux-datatable"],"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/flipbyte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-13T08:36:08.000Z","updated_at":"2021-05-20T03:15:31.000Z","dependencies_parsed_at":"2023-01-15T04:30:23.746Z","dependency_job_id":null,"html_url":"https://github.com/flipbyte/redux-datatable","commit_stats":null,"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"purl":"pkg:github/flipbyte/redux-datatable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipbyte%2Fredux-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipbyte%2Fredux-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipbyte%2Fredux-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipbyte%2Fredux-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flipbyte","download_url":"https://codeload.github.com/flipbyte/redux-datatable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipbyte%2Fredux-datatable/sbom","scorecard":{"id":403343,"data":{"date":"2025-08-11","repo":{"name":"github.com/flipbyte/redux-datatable","commit":"82a0d7cc91bd6f040f2bdf2e9a98d0b557fbd1b8"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/3 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"151 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-42xw-2xvc-qx8m","Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99","Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x","Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-vc8w-jr9v-vj7f","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-9j49-mfvp-vmhm","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m","Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q","Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c","Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4","Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g","Warn: Project is vulnerable to: GHSA-4c7m-wxvm-r7gc","Warn: Project is vulnerable to: GHSA-pch5-whg9-qr2r","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-48ww-j4fc-435p","Warn: Project is vulnerable to: GHSA-hwqf-gcqm-7353","Warn: Project is vulnerable to: GHSA-9h6g-pr28-7cqp","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-35q2-47q7-3pc3","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-hjp8-2cm3-cc45","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4","Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq","Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-f523-2f5j-gfcg","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472","Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq","Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5","Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T20:36:03.512Z","repository_id":34080205,"created_at":"2025-08-18T20:36:03.513Z","updated_at":"2025-08-18T20:36:03.513Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28507593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T10:25:30.148Z","status":"ssl_error","status_checked_at":"2026-01-17T10:25:29.718Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-table","datatable","react","react-datatable","redux","redux-datatable"],"created_at":"2026-01-17T11:30:39.468Z","updated_at":"2026-01-17T11:30:40.138Z","avatar_url":"https://github.com/flipbyte.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @flipbyte/redux-datatable\n\n[Developed by Flipbyte](https://www.flipbyte.com/)\n\n[![npm package][npm-badge]][npm]\n[![Codacy Badge][codacy-badge]][codacy]\n\nDatatable built using React and Redux to fetch JSON data asynchronously\nusing REST API.  \n\n-   Filterable columns by date ranges, numeric ranges and text.\n-   Pagination\n-   Sortable columns\n-   Configurable column widths\n-   Editable table\n-   Built in windowing to handle large dataset with thousands of rows\n-   Customizable limiter options\n-   Customizable toolbar with the ability to add custom renderers\n-   Easily configurable layout\n-   Custom row level actions\n-   Thunks to handle custom mass or row actions externally.\n-   Compatible with normalizr to handle externally managed states\n-   Easily styleable with styled-components and/or external css.\n-   Show or hide columns dynamically using the Columns item in the\n    toolbar.\n\n## Installation\n\nRun the following command to install using npm\n\n```sh\nnpm i @flipbyte/redux-datatable\n```\n\n## Usage\n\n### Add the table reducer and epics to your store\n\n```javascript\n// Get the table reducer and epics as follows\nimport { reducer, epics } from '@flipbyte/redux-datatable';\n\n// Add the above reducer and epics to your store.\n```\n\n### Preparing your table config object\n\n```javascript\n{\n    name: 'your_table_name', // this is the key used to set your table data inside the table reducer\n    height: 400,\n    rowHeight: 50,\n    editing: false,\n    primaryKey: 'id',\n    noResultsMessage: 'No row(s) found',\n    routes: { // You can add other routes and handle them using custom actions.\n        get: { // The route used to fetch data and it's params\n            route: '/{your_route}',\n            sort: 'id',\n            dir: 'asc',\n            resultPath: {\n                data: 'data'\n            },\n            params: {\n                ...your_params_key_value_pair\n            }\n        },\n        ...\n    },\n    entity: { // optional. Check example code in /demo.\n        state: '{your state path}',\n        responseSchema: // normalizr schema,\n        schema: // normal;izr schema\n    },\n    layout: [\n        ['Editable'],\n        ['MassActions', 'SimpleButton', 'ResetFilters', 'Spacer', 'Print', 'Columns'],\n        ['Limiter', 'Spacer', 'ResultCount', 'Spacer', 'Pages'],\n        [{ id: 'Table', layout: [\n            ['Header'],\n            ['Filters'],\n            ['Body'],\n            ['Header']\n        ]}],\n        ['Limiter', 'Spacer', 'ResultCount', 'Spacer', 'Pages'],\n    ],\n    components: {\n        Header: {\n            rowClassName: 'your custom class names',\n            colClassName: 'your custom class names',\n            className: 'your custom class names',\n        },\n        Body: {\n            rowClassName: 'your custom class names',\n            colClassName: 'your custom class names',\n            className: 'your custom class names',\n        },\n        Filters: {\n            rowClassName: 'your custom class names',\n            colClassName: 'your custom class names',\n            className: 'your custom class names',\n        },\n        Loader: {\n            styles: {\n                mask: { ... },\n                spinner: { ... }\n            }\n        },\n        ResultCount: {\n            className: 'your custom class names',\n            styles: { ... }\n        },\n        Pages: {\n            firstClassName: 'your custom class names',\n            lastClassName: 'your custom class names',\n            nextClassName: 'your custom class names',\n            prevClassName: 'your custom class names',\n            pageNumberClassName: 'your custom class names',\n            activeClassName: 'your custom class names',\n            styles: {\n                first: { ... },\n                last: { ... },\n                previous: { ... },\n                next: { ... },\n                pageNumber: { ... },\n            }\n        },\n        Editable: {\n            type: 'editable',\n            labels: {\n                show: 'Make editable',\n                hide: 'Hide editable',\n                save: 'Save',\n            },\n            classNames: {\n                show: 'your custom class names',\n                hide: 'your custom class names',\n                save: 'your custom class names',\n            },\n            save: ( config ) =\u003e ( dispatch, getState ) =\u003e {\n                const tableState = getState()[config.reducerName][config.name];\n                console.log('toolbar save click with modified data', config, tableState.modified);\n                config.action(MODIFY_DATA)({ clear: true });\n                // Dispatch MODIFY_DATA action with clear: true, to reset the modified data\n                // Dispatch REQUEST_DATA action \"config.action(REQUEST_DATA)\" to refresh data.\n            },\n            styles: {\n                show: { ... },\n                hide: { ... },\n                save: { ... }\n            }\n            // renderer: ( props ) =\u003e { ... }\n        },\n        MassActions: {\n            name: 'actions',\n            label: 'Actions',\n            id: 'dropdown',\n            className: 'your custom class names',\n            btnClassName: 'your custom class names',\n            menuClassName: 'your custom class names',\n            menuItemClassName: 'your custom class names',\n            activeClassName: 'your custom class names',\n            styles: {\n                button: { ... },\n                dropdownMenu: { ... },\n                dropdownItem: { ... }\n            }\n            options: [{\n                type: 'action',\n                name: 'delete',\n                label: 'Delete',\n                styles: { ... },\n                thunk: ( config ) =\u003e ( dispatch, getState ) =\u003e {\n                    // Get current table state.\n                    const tableState = getState()[config.reducerName][config.name];\n                    console.log(config, tableState);\n                    console.log(getItemIds(tableState.selection, tableState.items, config.primaryKey/*, config.entity.schema*/))\n                    confirm('Are your sure you want to delete the selected items?')\n                        ? console.log('delete items', config, getState(), tableState)\n                        : console.log(false);\n\n                    // Filter your selected item ids here for deletion\n                    // You can find the selection data in the selection key of the tableState.\n                    // When all:true, exclude the ids in the selected object with value false and vice versa.\n                }\n            }, {\n                type: 'action',\n                name: 'edit',\n                label: 'Edit this field',\n            }, ...]\n        },\n        SimpleButton: {\n            type: 'button',\n            label: 'Simple Button',\n            className: 'your custom class names',\n            thunk: ( config ) =\u003e ( dispatch, getState ) =\u003e { ... },\n            styles: { ... }\n        },\n        ResetFilters: {\n            type: 'reset-filters',\n            label: 'Reset Filters',\n            className: 'your custom class names',\n            styles: { ... }\n        },\n        Print: {\n            type: 'print',\n            label: 'Print Table',\n            className: 'your custom class names',\n            styles: { ... }\n        },\n        Columns: {\n            name: 'columns',\n            type: 'columns',\n            label: 'Columns',\n            visible: true,\n            className: 'your custom class names',\n            btnClassName: 'your custom class names',\n            menuClassName: 'your custom class names',\n            menuItemClassName: 'your custom class names',\n            activeClassName: 'your custom class names',\n            styles: {\n                button: { ... },\n                dropdownMenu: { ... },\n                dropdownItem: { ... }\n            }\n        },\n        Limiter: {\n            type: 'limiter',\n            options: [10, 20, 50, 200, 2000, 0],\n            default: 200,\n            className: 'your custom class names',\n            selectClassName: 'your custom class names',\n            styles: { ... }\n        },\n        Table: {\n            className: 'your custom class names',\n            styles: {\n                table: { ... },\n                thead: { ... },\n                tbody: { ... },\n                filters: { ... },\n                tr: {\n                    header: { ... },\n                    filters: { ... },\n                    body: { ... }\n                },\n                th: { ... },\n                td: {\n                    filters: { ... },\n                    body: { ... }\n                }\n            },\n            columns: [{\n                name: 'id',\n                label: '',\n                sortable: false,\n                type: 'selection',\n                width: 50,\n            }, {\n                label: 'ID',\n                type: 'number',\n                name: 'id',\n                sortable: true,\n                width: 150,\n                filterable: true,\n                sortable: true,\n            }, {\n                label: \"Status\",\n                type: \"options\",\n                name: \"status\",\n                sortable: true,\n                filterable: true,\n                textAlign: \"center\",\n                options: {\n                    \"published\": {\n                        label: \"Published\"\n                    },\n                    \"draft\": {\n                        label: \"Draft\"\n                    },\n                    \"archived\": {\n                        label: \"Archived\"\n                    },\n                    ...\n                }\n            }, {\n                label: 'Avatar',\n                type: 'image',\n                name: 'avatar',\n                sortable: false,\n                textAlign: 'center',\n                width: 200,\n                filterable: false,\n                imgHeight: 50\n            }, {\n                label: 'First Name',\n                type: 'string',\n                name: 'first_name',\n                sortable: true,\n                textAlign: 'text-left',\n                width: 200,\n                filterable: true,\n            }, {\n                label: 'Actions',\n                type: 'actions',\n                name: 'actions',\n                width: 100,\n                items: [{\n                    type: 'action',\n                    name: 'edit',\n                    label: 'Edit',\n                    btnClass: 'btn btn-secondary',\n                    icon: 'edit',\n                    thunk: ( payload ) =\u003e ( dispatch, getState ) =\u003e {\n                        console.log('edit', payload, getState());\n                    },\n                    style: { ... }\n                }, {\n                    type: 'action',\n                    name: 'delete',\n                    label: 'Delete',\n                    icon: 'trash-alt',\n                    thunk: ( payload ) =\u003e ( dispatch, getState ) =\u003e {\n                        confirm(\"Are your sure you want to delete this page?\")\n                            ? console.log('delete', getState())\n                            : console.log(false);\n                    },\n                    style: { ... }\n                },\n            \t...\n            \t]\n            },\n            ...\n            ]\n        }\n    }\n}\n```\n\n### Render table component\n\n```javascript\nimport ReduxDatatable from '@flipbyte/redux-datatable';\n\nconst YourComponent = () =\u003e\n\t\u003cReduxDatatable\n\t\treducerName={ /* The key used while combining reducers in the store */ }\n\t\tconfig={ /*your table config object*/ }\n\t/\u003e\n```\n\n### Table config props\n\n| Key              | Type    | Required | Default | Description                                                                                      |\n| ---------------- | ------- | -------- | ------- | ------------------------------------------------------------------------------------------------ |\n| name             | string  | true     | -       | key in the row data whose value needs to be loaded for the column (does not have to be unique)   |\n| height           | integer | true     | -       | The maximum height of the table                                                                  |\n| rowHeight        | integer | true     | -       | The maximum height of each table body row                                                        |\n| routes           | object  | true     | -       | Routes definition to fetch data and other custom routes config for custom handling (Check below) |\n| components       | object  | true     | -       | All the components required for your table                                                       |\n| entity           | object  | false    | -       | [Normalizr](https://github.com/paularmstrong/normalizr) specification. Check below for details.  |\n| layout           | array   | true     | -       | The layout of your table                                                                         |\n| editing          | boolean | false    | false   | Set the default state of the table to be in editing mode                                         |\n| primaryKey       | string  | true     | -       | Set the primary key column of the table for actions like editing.                                |\n| noResultsMessage | string  | true     | -       | Set the message to be displayed when table is empty                                              |\n\n#### Routes object\n\n| Key        | Type   | Required | Default | Description                                                                                          |\n| ---------- | ------ | -------- | ------- | ---------------------------------------------------------------------------------------------------- |\n| get        | object | true     | -       | The configuration for fetching data                                                                  |\n| **- get**  |        |          |         |                                                                                                      |\n| route      | string | true     | -       | Your data fetching route                                                                             |\n| sort       | string | true     | -       | Your key to sort with                                                                                |\n| dir        | string | true     | -       | Sort by 'asc' or 'desc' order                                                                        |\n| resultPath | object | true     | -       | The keys object to your data. Required { data: '{your data path in json response. Ex: result.data}'} |\n| params     | object | false    | -       | Key-value pairs of additional params that you want to pass to the request                            |\n\n#### Components object\n\nComponents can be defined within this object as key value pairs, where `key` is the id of the component and needs to be unique and `value` is a configuration object for the specific component.\nAll available components are listed below with their configuration. Custom components can be added and existing components can be overridden by using the key `renderer` in the configuration object of the component.\nPlease check the example table config object above.\n\n#### Layout array\n\nAn array of arrays where each inner array represents a row in the layout, within which components can be specified, which will be displayed in the frontend.\nPlease check the example table config object above.\n\n#### Entity array\n\nAll the fields are required when entity is defined (data normalized). However, entity key itself is optional in the table config.\n\n| Key            | Type   | Required | Default | Description                                                                             |\n| -------------- | ------ | -------- | ------- | --------------------------------------------------------------------------------------- |\n| state          | object | true     | -       | Path to sub state in your top level redux state where the normalized data will be saved |\n| responseSchema | object | true     | -       | Define how the data is represented in your fetch data api response                      |\n| schema         | object | true     | -       | Define how the data is represented in each row item of the table fetch repsonse         |\n| selectors      | object | true     | -       | Add the selectors that will be used by columns to fetch respective data                 |\n\nNote: Check the [example](https://github.com/flipbyte/redux-datatable/blob/master/demo/src/schema/normalized.js) code.\n\n#### Available Components\n\n**_Common Properties_**\n\n| Key       | Type     | Required | Default | Description                                                                                        |\n| --------- | -------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |\n| styles    | object   | false    | {}      | styled-component styles object or key-value pairs with values being styled-component styles object |\n| renderer  | function | false    | -       | returns a react component                                                                          |\n| type      | string   | true     | -       | the type of the object                                                                             |\n| className | string   | true     | varies  | html class names for top-level html element in the component                                       |\n\n##### Loader\n\nNote: This component cannot be added to the layout and does not have any other properties except styles.\n\n**_Styles object properties_**\n\n| Key     | Type   | Required | Default | Description                    |\n| ------- | ------ | -------- | ------- | ------------------------------ |\n| mask    | object | false    | {}      | styled-component styles object |\n| spinner | object | false    | {}      | styled-component styles object |\n\n##### ResultCount\n\nNo unique properties\n\n##### Pages\n\n**_Properties_**\n\n| Key                 | Type   | Required | Default      | Description      |\n| ------------------- | ------ | -------- | ------------ | ---------------- |\n| firstClassName      | string | false    | rdt-pg-first | html class names |\n| lastClassName       | string | false    | rdt-pg-last  | html class names |\n| prevClassName       | string | false    | rdt-pg-prev  | html class names |\n| nextClassName       | string | false    | rdt-pg-next  | html class names |\n| pageNumberClassName | string | false    | rdt-pg-num   | html class names |\n| activeClassName     | string | false    | active       | html class names |\n\n**_Styles object properties_**\n\n| Key        | Type   | Required | Default | Description                    |\n| ---------- | ------ | -------- | ------- | ------------------------------ |\n| first      | object | false    | {}      | styled-component styles object |\n| last       | object | false    | {}      | styled-component styles object |\n| previous   | object | false    | {}      | styled-component styles object |\n| next       | object | false    | {}      | styled-component styles object |\n| pageNumber | object | false    | {}      | styled-component styles object |\n\n##### Editable (type: editable)\n\nToggles the table between editable and non-editable and shows a save button when the content of the table is modified\n\n**_Properties_**\n\n| Key        | Type     | Required | Default     | Description                                     |\n| ---------- | -------- | -------- | ----------- | ----------------------------------------------- |\n| labels     | object   | false    | check below | check below                                     |\n| save       | function | false    | -           | ( config ) =\u003e ( dispatch, getState ) =\u003e { ... } |\n| classNames | object   | false    | check below | check below                                     |\n\n**_classNames object properties_**\n\n| Key  | Type   | Required | Default                | Description      |\n| ---- | ------ | -------- | ---------------------- | ---------------- |\n| show | string | false    | rdt-toolbar-button     | html class names |\n| hide | string | false    | rdt-toolbar-button     | html class names |\n| save | string | false    | Sardt-toolbar-buttonve | html class names |\n\n**_Labels object properties_**\n\n| Key  | Type   | Required | Default       | Description                                     |\n| ---- | ------ | -------- | ------------- | ----------------------------------------------- |\n| show | string | false    | Make editable | Label for the button to show editable table     |\n| hide | string | false    | Hide editable | Label for the button to hide editable table     |\n| save | string | false    | Save          | Label for the button to save the modified table |\n\n**_Styles object properties_**\n\n| Key  | Type   | Required | Default | Description                    |\n| ---- | ------ | -------- | ------- | ------------------------------ |\n| show | object | false    | {}      | styled-component styles object |\n| hide | object | false    | {}      | styled-component styles object |\n| save | object | false    | {}      | styled-component styles object |\n\n##### Actions (type: mass-actions)\n\n**_Properties_**\n\n| Key               | Type   | Required | Default            | Description                           |\n| ----------------- | ------ | -------- | ------------------ | ------------------------------------- |\n| options           | array  | true     | \\[]                | array of actions objects              |\n| label             | string | true     | -                  | Label for the actions dropdown button |\n| btnClassName      | string | false    | rdt-toolbar-button | html class names                      |\n| menuClassName     | string | false    | rdt-toolbar-menu   | html class names                      |\n| menuItemClassName | string | false    | rdt-toolbar-item   | html class names                      |\n| activeClassName   | string | false    | show               | html class names                      |\n\n**_Actions object properties_**\n\n| Key   | Type     | Required | Default | Description                                     |\n| ----- | -------- | -------- | ------- | ----------------------------------------------- |\n| type  | string   | true     | -       | action                                          |\n| name  | string   | true     | -       | Unique name                                     |\n| label | string   | true     | -       | Label for the action item                       |\n| role  | string   | false    | -       | Add role 'menu-item' to hide dropdown on click  |\n| thunk | function | true     | -       | ( config ) =\u003e ( dispatch, getState ) =\u003e { ... } |\n\n**_Styles object properties_**\n\n| Key          | Type   | Required | Default | Description                    |\n| ------------ | ------ | -------- | ------- | ------------------------------ |\n| button       | object | false    | {}      | styled-component styles object |\n| dropdownMenu | object | false    | {}      | styled-component styles object |\n| dropdownItem | object | false    | {}      | styled-component styles object |\n\n##### Button (type: button)\n\n**_Properties_**\n\n| Key   | Type   | Required | Default | Description                           |\n| ----- | ------ | -------- | ------- | ------------------------------------- |\n| label | string | required | -       | Label for the actions dropdown button |\n\n##### ResetFilters (type: reset-filters)\n\n**_Properties_**\n\n| Key   | Type   | Required | Default | Description                           |\n| ----- | ------ | -------- | ------- | ------------------------------------- |\n| label | string | required | -       | Label for the actions dropdown button |\n\n##### Print (type: print)\n\nMakes the table printable.\n\n**_Properties_**\n\n| Key   | Type   | Required | Default | Description                           |\n| ----- | ------ | -------- | ------- | ------------------------------------- |\n| label | string | required | -       | Label for the actions dropdown button |\n\n##### Columns (type: columns)\n\nShows the columns toggling dropdown.\n\n**_Properties_**\n\n| Key               | Type   | Required | Default            | Description                           |\n| ----------------- | ------ | -------- | ------------------ | ------------------------------------- |\n| label             | string | required | -                  | Label for the actions dropdown button |\n| btnClassName      | string | false    | rdt-toolbar-button | html class names                      |\n| menuClassName     | string | false    | rdt-toolbar-menu   | html class names                      |\n| menuItemClassName | string | false    | rdt-toolbar-item   | html class names                      |\n| activeClassName   | string | false    | show               | html class names                      |\n\n**_Styles object properties_**\n\n| Key          | Type   | Required | Default | Description                    |\n| ------------ | ------ | -------- | ------- | ------------------------------ |\n| button       | object | false    | {}      | styled-component styles object |\n| dropdownMenu | object | false    | {}      | styled-component styles object |\n| dropdownItem | object | false    | {}      | styled-component styles object |\n\n##### Limiter (type: limiter)\n\n| Key             | Type    | Required | Default            | Description                                                           |\n| --------------- | ------- | -------- | ------------------ | --------------------------------------------------------------------- |\n| options         | array   | required | \\[]                | array of limiter counts                                               |\n| default         | integer | required | \\[]                | default limiter option (should be a value in the options array above) |\n| selectClassName | string  | false    | rdt-limiter-select | html class names                                                      |\n\n##### Table (type: table)\n\n| Key     | Type  | Required | Default | Description                               |\n| ------- | ----- | -------- | ------- | ----------------------------------------- |\n| columns | array | required | \\[]     | array of object with column configuration |\n\n**_Columns object properties_**\n\n| Key                             | Type     | Required | Default | Description                                                                                   |                                                                                                                                                      |\n| ------------------------------- | -------- | -------- | ------- | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |\n| name                            | string   | true     | -       | Unique name for the column                                                                    |                                                                                                                                                      |\n| label                           | string   | true     | -       | Label for the column                                                                          |                                                                                                                                                      |\n| sortable                        | boolean  | false    | true    | Whether the column is sortable                                                                |                                                                                                                                                      |\n| filterable                      | boolean  | false    | true    | Whether the column is filterable                                                              |                                                                                                                                                      |\n| editable                        | boolean  | false    | false   | When the table is set to be editable, set whether the respective column is among the editable |                                                                                                                                                      |\n| visible                         | boolean  | false    | true    | Whether the column is visible on load                                                         |                                                                                                                                                      |\n| type                            | string   | true     | string  | Available types: selection, number, date, string, image, options, actions                     |                                                                                                                                                      |\n| width                           | integer  | true     | -       | Width of the column                                                                           |                                                                                                                                                      |\n| textAlign                       | string   | false    | left    | Text alignment in the column                                                                  |                                                                                                                                                      |\n| renderer                        | function | false    | -       | Define a custom renderer for column body.                                                     |                                                                                                                                                      |\n| selector                        | string   | object   | false   | -                                                                                             | Define a custom selector to pick the value for the column from the state. When string is used, the selector should be defined under entity.selectors |\n| **type: actions**               |          |          |         |                                                                                               |                                                                                                                                                      |\n| items                           | array    | true     | -       | array of item configuration object                                                            |                                                                                                                                                      |\n| **- item configuration object** |          |          |         |                                                                                               |                                                                                                                                                      |\n| name                            | string   | true     | -       | Unique name for the action                                                                    |                                                                                                                                                      |\n| label                           | string   | true     | -       | Label for the action                                                                          |                                                                                                                                                      |\n| thunk                           | function | true     | -       | An action creator which is dispatched on action click. Check demo schema.                     |                                                                                                                                                      |\n\n**_Properties specific to column of type 'options'_**\n\n| Key     | Type   | Required | Default | Description                                  |\n| ------- | ------ | -------- | ------- | -------------------------------------------- |\n| options | object | true     | -       | Defines options for the column. Check below. |\n\n`options` key is an object with a unique key for each value object. The value object consists of a property `label` used to define the label of the said option. Please check the following example:\n\n```js\noptions: {\n    active: {\n        label: 'Active'\n    },\n    inactive: {\n        label: 'Inactive'\n    }\n    ...\n}\n```\n\n**_Properties specific to column of type 'actions'_**\n\n| Key   | Type  | Required | Default | Description                        |\n| ----- | ----- | -------- | ------- | ---------------------------------- |\n| items | array | true     | -       | array of item configuration object |\n\n**_Properties for a single item of type 'actions'_**\n\n| Key    | Type     | Required | Default | Description                                                                     |\n| ------ | -------- | -------- | ------- | ------------------------------------------------------------------------------- |\n| name   | string   | true     | -       | Unique name for the action                                                      |\n| label  | string   | true     | -       | Label for the action                                                            |\n| thunk  | function | true     | -       | An action creator which is dispatched on action click. Check the example below. |\n| styles | object   | false    | {}      | styled-component styles object                                                  |\n\nExample:\n\n```js\n{\n    type: 'action',\n    name: 'edit',\n    label: 'Edit',\n    btnClass: 'btn btn-secondary',\n    icon: 'edit',\n    thunk: ( payload ) =\u003e ( dispatch, getState ) =\u003e {\n        console.log('edit', payload, getState());\n    },\n    styles: { ... }\n}\n```\n\n**_Styles object properties_**\n\n| Key     | Type   | Required | Default | Description                    |\n| ------- | ------ | -------- | ------- | ------------------------------ |\n| table   | object | false    | {}      | styled-component styles object |\n| thead   | object | false    | {}      | styled-component styles object |\n| tbody   | object | false    | {}      | styled-component styles object |\n| filters | object | false    | {}      | styled-component styles object |\n| tr      | object | false    | {}      | check below                    |\n| th      | object | false    | {}      | styled-component styles object |\n| td      | object | false    | {}      | check below                    |\n\n**_tr Styles object properties_**\n\n| Key     | Type   | Required | Default | Description                    |\n| ------- | ------ | -------- | ------- | ------------------------------ |\n| header  | object | false    | {}      | styled-component styles object |\n| filters | object | false    | {}      | styled-component styles object |\n| body    | object | false    | {}      | styled-component styles object |\n\n**_td Styles object properties_**\n\n| Key     | Type   | Required | Default | Description                    |\n| ------- | ------ | -------- | ------- | ------------------------------ |\n| filters | object | false    | {}      | styled-component styles object |\n| body    | object | false    | {}      | styled-component styles object |\n\n## License\n\nThe MIT License (MIT)\n\n[npm-badge]: https://img.shields.io/npm/v/@flipbyte/redux-datatable.svg\n\n[npm]: https://www.npmjs.com/package/@flipbyte/redux-datatable\n\n[codacy-badge]: https://api.codacy.com/project/badge/Grade/67274650b4874f5db55ede76156ab4d2\n\n[codacy]: https://www.codacy.com/app/flipbyte/redux-datatable?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=flipbyte/redux-datatable\u0026utm_campaign=Badge_Grade\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflipbyte%2Fredux-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflipbyte%2Fredux-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflipbyte%2Fredux-datatable/lists"}