{"id":24828202,"url":"https://github.com/fizix-io/ra-customizable-datagrid","last_synced_at":"2025-07-20T01:31:35.730Z","repository":{"id":42360755,"uuid":"140857490","full_name":"fizix-io/ra-customizable-datagrid","owner":"fizix-io","description":"React Admin plugin that allows to hide / show columns dynamically","archived":false,"fork":false,"pushed_at":"2022-12-08T07:33:12.000Z","size":7402,"stargazers_count":73,"open_issues_count":36,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-08T17:48:50.459Z","etag":null,"topics":["react","react-admin"],"latest_commit_sha":null,"homepage":"https://fizix-io.github.io/ra-customizable-datagrid/","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/fizix-io.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-07-13T14:33:33.000Z","updated_at":"2024-07-23T19:04:24.000Z","dependencies_parsed_at":"2023-01-25T09:00:47.265Z","dependency_job_id":null,"html_url":"https://github.com/fizix-io/ra-customizable-datagrid","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/fizix-io/ra-customizable-datagrid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fizix-io%2Fra-customizable-datagrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fizix-io%2Fra-customizable-datagrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fizix-io%2Fra-customizable-datagrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fizix-io%2Fra-customizable-datagrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fizix-io","download_url":"https://codeload.github.com/fizix-io/ra-customizable-datagrid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fizix-io%2Fra-customizable-datagrid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266053823,"owners_count":23869496,"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","react-admin"],"created_at":"2025-01-30T22:51:45.222Z","updated_at":"2025-07-20T01:31:35.706Z","avatar_url":"https://github.com/fizix-io.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv align=\"center\"\u003e\n  \u003cdiv style=\"margin-bottom: 20px\"\u003e\n\n\n[![GitHub issues](https://img.shields.io/github/issues/fizix-io/ra-customizable-datagrid.svg)](https://github.com/fizix-io/ra-customizable-datagrid/issues)\n[![GitHub stars](https://img.shields.io/github/stars/fizix-io/ra-customizable-datagrid.svg)](https://github.com/fizix-io/ra-customizable-datagrid/stargazers)\n[![GitHub license](https://img.shields.io/github/license/fizix-io/ra-customizable-datagrid.svg)](https://github.com/fizix-io/ra-customizable-datagrid/blob/master/LICENSE)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/fizix-io/ra-customizable-datagrid.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fgithub.com%2Ffizix-io%2Fra-customizable-datagrid)\n\n  \u003c/div\u003e\n\n  \u003ca href=\"https://fizix.io\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg width=\"70\" src=\"https://s3.eu-central-1.amazonaws.com/fizix-assets/images/logos/fizix-logo-black.png\" alt=\"Fizix logo\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003era-customizable-datagrid for \u003ca rel=\"noopener\" target=\"_blank\" href=\"https://github.com/marmelab/react-admin/\"\u003eReact Admin\u003c/a\u003e\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[React Admin](https://github.com/marmelab/react-admin/) plugin that allows to hide / show columns dynamically.\n\n\u003c/div\u003e\n\n\n## Preview\n\n\u003ca href=\"https://fizix-io.github.io/ra-customizable-datagrid/\" rel=\"noopener\" target=\"_blank\"\u003eDemo link\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"800\" src=\"./demo/demo.gif\" alt=\"Demo\"\u003e\n\u003c/p\u003e\n\n\n## Features\n\n* Users can show/hide columns, obviously\n* Users preferences are stored by resource\n* The storage mechanism can be replaced\n* Developers can choose the default visible columns\n\n## Installation\n\nra-customizable-datagrid is available from npm. You can install it (and its required dependencies) using:\n\n```\n$\u003e npm install --save ra-customizable-datagrid\n```\nor\n```\n$\u003e yarn add ra-customizable-datagrid\n```\n\nThen replace React Admin `Datagrid` by `CustomizableDatagrid`\n\n```jsx\nimport CustomizableDatagrid from 'ra-customizable-datagrid';\n\nconst PostList = props =\u003e (\n  \u003cList {...props}\u003e\n    \u003cCustomizableDatagrid\u003e\n      \u003cTextField source=\"id\" /\u003e\n      \u003cTextField source=\"title\" /\u003e\n    \u003c/CustomizableDatagrid\u003e\n  \u003c/List\u003e\n);\n```\n\n## Configuration\n\n### Storage\n\nBy default LocalStorage is used to store user preferences.\n\nIf you need to store them somewhere else, use the `storage` props like this :\n\n```jsx\n\u003cCustomizableDatagrid storage={CustomStorage}\u003e\n```\n\nwhere CustomStorage is an object with the `set` and `get` methods :\n\n```js\nconst CustomStorage = {\n  get: (resourceName) =\u003e /* your own logic here */,\n  set: (resourceName, selectedColumns) =\u003e /* your own logic here */,\n};\n```\n\n### Default columns\n\nAll the columns are visible by default.\n\nThis behavior can be changed with the `defaultColumns` prop. Just pass an array containing the name of the columns you want to be visible.\n\n```jsx\nimport CustomizableDatagrid from 'ra-customizable-datagrid';\n\nconst PostList = props =\u003e (\n  \u003cList {...props}\u003e\n    \u003cCustomizableDatagrid defaultColumns={['title']}\u003e\n      \u003cTextField source=\"id\" /\u003e\n      \u003cTextField source=\"title\" /\u003e\n    \u003c/CustomizableDatagrid\u003e\n  \u003c/List\u003e\n);\n```\n\n## How to run the demo locally\n\n```\n$\u003e npm run demo-install\n$\u003e npm run demo\n```\n\n## License\n\n`ra-customizable-datagrid` is licensed under the MIT License, sponsored and supported by \u003ca href=\"https://fizix.io/\" rel=\"noopener\" target=\"_blank\"\u003eFizix\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffizix-io%2Fra-customizable-datagrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffizix-io%2Fra-customizable-datagrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffizix-io%2Fra-customizable-datagrid/lists"}