{"id":20079163,"url":"https://github.com/kenforthewin/react-redux-datatable","last_synced_at":"2025-05-05T22:33:09.977Z","repository":{"id":57351352,"uuid":"124438724","full_name":"kenforthewin/react-redux-datatable","owner":"kenforthewin","description":"A React and Redux-based table for server-processed data.","archived":false,"fork":false,"pushed_at":"2018-11-08T01:47:36.000Z","size":983,"stargazers_count":70,"open_issues_count":2,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-01T23:24:21.646Z","etag":null,"topics":["react","redux"],"latest_commit_sha":null,"homepage":"https://datatable.kenforthewin.com/","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/kenforthewin.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}},"created_at":"2018-03-08T19:34:44.000Z","updated_at":"2025-02-20T04:30:35.000Z","dependencies_parsed_at":"2022-08-31T03:52:09.327Z","dependency_job_id":null,"html_url":"https://github.com/kenforthewin/react-redux-datatable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenforthewin%2Freact-redux-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenforthewin%2Freact-redux-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenforthewin%2Freact-redux-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenforthewin%2Freact-redux-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenforthewin","download_url":"https://codeload.github.com/kenforthewin/react-redux-datatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252586409,"owners_count":21772294,"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":["react","redux"],"created_at":"2024-11-13T15:20:09.080Z","updated_at":"2025-05-05T22:33:09.620Z","avatar_url":"https://github.com/kenforthewin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-remote-datatable\n\n[Test it out here.](https://datatable.kenforthewin.com/)\n![project example](https://storage.googleapis.com/brrrr/better-datatable.gif)\n\n## Installation\n\n`npm i redux-remote-datatable --save`\n\n## Usage\n\n- Add the reducer.\n\n```javascript\nimport { dataTableReducer } from 'redux-remote-datatable';\n\n...\n\nconst appReducer = persistCombineReducers(config, {\n  dataTableReducer,\n  ...\n});\n```\n\n- Add the DataTableRedux component with its required initialization props.\n\n```javascript\nimport { DataTableRedux as DataTable } from 'redux-remote-datatable';\n\n...\n\n\u003cDataTable\n  fields={{\"Name\": \"official_name\", \"Birthday\": \"birthday\", \"Thomas ID\": \"thomas_id\" }}\n  ajax=\"http://localhost:3000/legislators\"\n  idField=\"id\" /\u003e\n```\n\n### Initialization props\n\n- `fields`: An object whose keys are the table header titles and whose values correspond with values in the received data objects.\n- `ajax`: The data url.\n- `idField`: The unique identifier field of the received data objects. Used when assigning keys to child elements.\n\nThe component will make POST requests to the `ajax` endpoint for data to populate the table. In the body of the POST request will be a JSON object with the following parameters:\n\n### Request parameters\n\n- `draw`: starts at 1 and is incremented by 1 every time data is requested from the remote server and the table is re-drawn.\n- `page`: The current page.\n- `perPage`: The amount of data objects to be requested and displayed per page.\n- `sortField`: The field to sort the data by. Can be null.\n- `sortDirection`: One of `asc` and `desc`.\n- `searchValue`: The user-inputted search string. Default is a blank string.\n\n### Response parameters\n\n- `draw`: echo the draw from the request.\n- `totalRecords`: Record count before pagination.\n- `data`: An array of JSON objects with keys corresponding to the pre-defined fields.\n\n### Example response\n\n```json\n{\n    \"draw\": \"1\",\n    \"totalRecords\": 473,\n    \"data\": [\n        {\n            \"id\": 52,\n            \"official_name\": \"Roy Blunt\",\n            \"thomas_id\": \"01464\",\n            \"birthday\": \"1950-01-10\"\n        },\n        {\n            \"id\": 51,\n            \"official_name\": \"Richard Blumenthal\",\n            \"thomas_id\": \"02076\",\n            \"birthday\": \"1946-02-13\"\n        },\n        ...\n    ]\n}\n```\n\n## Example backend\n\n- An example backend, written in Ruby on Rails, is available [here](https://github.com/kenforthewin/legislators-api).\n- A separate example backend written in Elixir (Phoenix) [here](https://github.com/kenforthewin/legislators-api-phoenix).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenforthewin%2Freact-redux-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenforthewin%2Freact-redux-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenforthewin%2Freact-redux-datatable/lists"}