{"id":25793833,"url":"https://github.com/filipdanic/spicy-datatable","last_synced_at":"2025-02-27T13:39:28.316Z","repository":{"id":57243793,"uuid":"78095382","full_name":"filipdanic/spicy-datatable","owner":"filipdanic","description":"React.js datatables without jQuery. Smart react datatable that includes search, pagination and localization.","archived":false,"fork":false,"pushed_at":"2019-02-25T09:55:37.000Z","size":489,"stargazers_count":39,"open_issues_count":3,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-22T09:18:36.367Z","etag":null,"topics":["datatables","react-component","reactjs"],"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/filipdanic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-05T08:40:19.000Z","updated_at":"2023-05-28T02:52:36.000Z","dependencies_parsed_at":"2022-09-01T06:30:26.875Z","dependency_job_id":null,"html_url":"https://github.com/filipdanic/spicy-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/filipdanic%2Fspicy-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipdanic%2Fspicy-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipdanic%2Fspicy-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipdanic%2Fspicy-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filipdanic","download_url":"https://codeload.github.com/filipdanic/spicy-datatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240261593,"owners_count":19773484,"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":["datatables","react-component","reactjs"],"created_at":"2025-02-27T13:39:27.669Z","updated_at":"2025-02-27T13:39:28.307Z","avatar_url":"https://github.com/filipdanic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# spicy-datatable\n\nA React.js datatables without jQuery. Smart datatable component that includes search, pagination, CSV export, and localization support.\n\n**Demos:**\n- [Live ReactJS Datatables in Action!](https://spicy-datatable.now.sh) And supporting [source code.](https://github.com/filipdanic/spicy-datatable/blob/master/src/App.js)\n- [CodeSandbox Demo and Starter](https://codesandbox.io/s/rmy3k2zk1p)\n\nJump to:\n- [Installing](#install)\n- [Required props](#required-prop-docs)\n- [Customization and localization via config](#config-prop),\n- [Styling](#styling)\n- [Roadmap](#roadmap)\n- [Contributing](#contribute).\n\n## Install\n\nTo get started with `spicy-datatable` in your project:\n\n```\nnpm i spicy-datatable --save\n# or\nyarn add spicy-datatable\n```\n\nThen, in your code:\n\n```javascript\n\nimport SpicyDatatable from 'spicy-datatable';\n// …somewhere:\n\u003cSpicyDatatable\n  tableKey={key} // see below for prop documentation\n  columns={columns}\n  rows={rows}\n  config={config} // optional, used to override chosen default settings/labels\n/\u003e\n\n```\n\nNow you are all set to enjoy some ReactJS datatables in your project! No jQuery or other heavy dependencies. 🙌\n\nLook at the [demo data file](https://github.com/filipdanic/spicy-datatable/blob/master/src/demo-data.js) for examples of how the `rows` and `columns` props look.\n\nYou can also clone this repo which includes a full demo with `create-react-app` that you can use to try out the library.\n\n## Required Prop Docs\n\nThe **`tableKey`** is a `String` used to identify the table dataset. It is required.\n\nThe **`columns`** prop is an array of colum objects which have a key and label. Like this:\n\n```javascript\nconst columns = [{\n    key: 'userId',\n    label: '#',\n  }, {\n    key: 'name',\n    label: 'Name',\n    sort: true, // will enable a client-side sort for this column!\n  }, {\n    key: 'email',\n    label: 'Email',\n  },\n];\n```\n\nThe **`rows`** prop is an array of objects that have the `key: value` pairs described in our columns. For example:\n\n```javascript\n\nconst rows = [\n  {\n    userId: 1,\n    name:  'Sansa Stark',\n    email: 'sansa@winterfell.gov',\n    onClickHandler: someFunction,\n    isActive: true,\n  },\n  {\n    userId: 2,\n    name: 'Jon Snow',\n    email: 'jon@nightswatch.gov',\n    onClickHandler: someFunction,\n    isActive: false,\n  },\n];\n```\n\n- The **`onClickHandler`** is optional. It will attach an `onClick()` callback on the row. Your handler will receive three params:\n  - `event {Object}`, the proxied React click event\n  - `row {Object}`, the row that was clicked\n  - `index {Number}`, the index of the item within the currently visible table view\n- The **`isActive`** prop is also optional. The row that has this prop set to true will have a special class applied (CSS styling purposes.)\n\n## Config prop\n\nYou can pass a `config` prop the `\u003cSpicyDatatable /\u003e` component to change all the default settings and labels.\n\nThis is great if you want to change the text or localize your component. Here’s an overview of all the options you can specify via the `config` object.\n\n_See the [customOptions object in the demo data](https://github.com/filipdanic/spicy-datatable/blob/master/src/demo-data.js) for an example of how it is used in example #2 on the demo page._\n\n### Pagination Config\n\n- **`itemsPerPageOptions`**: an `Array` of `Number`s, defaults to `[10, 25, 50, 100]`,\n- **`itemsPerPageLabel`**: a `String`, defaults to `Entries per page:`\n- **`nextPageLabel`**: a `String`, defaults to `Next`\n- **`previousPageLabel`**: a `String`, defaults to `Back`\n\n### Search Config\n\n- **`searchLabel`**: a `String`, defaults to `Search:`\n- **`searchPlaceholder`**: a `String`, defaults to `Type to search…`\n\n### CSV Export Config\n\n- **`showDownloadCSVButton`**: a `Boolean` to turn the CSV export on or off, defaults to `false`.\n- **`downloadCSVButtonLabel`**: a `String` to change the label on the CSV button, defaults to `Export CSV`.\n- **`customCSVKeys`**: an `Array` of `String`s to specify which keys should be included in the exported CSV.\n- **`customCSVRowsFormatter`**: a `Function` that receives a single parameter `rows` of type `Array` and returns a similar structure back. Use this prop to format data that will be in the CSV.\n\n### Misc Labels\n\n- **`noEntriesLabel`**: a `String`, defaults to `No entries to show.`\n- **`entryCountLabels`**: an `Array` of `String`s, defaults to `['Showing', 'to', 'of', 'entries.']`. Prints out _Showing 10 to 20 of 300 entires._ at the bottom of the table.\n\n### Custom Filter\n\n- **`customFilter`**: a `Function()` that can be used to override the default search logic. It will get three params: `(rows, columns, searchQuery)` and should return a new `rows` of type `Array`.\n\n__**Example:**__\n\nSay you want to only search for matches in the `name` column while ignoring case sensitivity:\n\n```javascript\nconst customFilter = (rows, columns, searchQuery = '') =\u003e {\n  return rows.filter(row =\u003e row.name.toLowerCase().indexOf(searchQuery.toLowerCase()) \u003e -1);\n}\n```\n\n## Styling\n\nOut of the box, `spicy-datatable` is bare-bones. Include this [CSS starter file](https://github.com/filipdanic/spicy-datatable/blob/master/src/sample-styles.css) in your project to get the look from the demo. Edit it to suit your needs.\n\n## FAQ\n\nQ: I want the search feature to account for accidental typos (or implement a different type of logic altogether).\nA: Check the [prop config object](#config-prop), it has a `customFilter` options. Here’s a [sample object](https://github.com/filipdanic/spicy-datatable/blob/master/src/demo-data.js) that has a custom filter function.\n\nQ: Is this component compatible with React 15.5.x?\nA: Yep! And we’ll be switching to 16.x.x once it’s stable.\n\nQ: Is the CSV export supported by MS Edge / Internet Explorer 11?\nA: Yep, and it should be supported by IE9+.\n\nQ: There is no CSV button in my table?!\nA: This CSV export is an optional feature, you need to turn it on via a [prop config object.](#config-prop)\n\nQ: How can I style the CSV button?\nA: The button has a CSS class `spicy-datatableoptions-export--button` and is wrapped by `spicy-datatableoptions-export--button-wrapper`. See the sample from the styling section.\n\n## Roadmap\n\n- (Optional) Bootstrap styles!\n- Unit and performance tests.\n- ~~Sortable columns.~~\n- PDF/Excel download\n\n## Contribute\n\nThere are many ways to contribute. For example:\n\n- Test the library in your project, [open an issue](https://github.com/filipdanic/spicy-datatable/issues/new) if you find bugs or problems!\n- If you are enjoying the library, star it here on Github to show your support.\n- Have a feature request? Want the roadmap to hurry up? Open a feature request [via the issues tab.](https://github.com/filipdanic/spicy-datatable/issues/new)\n- Fixed a problem or added a feature on your fork? Send a PR to make it part of the main distribution.\n- The docs could be better? Found a typo? Submit a PR!\n\n## Contributors\n\nNeed help with your **first PR** in OSS? Open an issue and we will find something simple and cool for you!\n\n- [@filipdanic](https://github.com/filipdanic/)\n- [@sahiljain112](https://github.com/sahiljain112)\n- [@scott-schmalz](https://github.com/scott-schmalz)\n- [@shahidulkareem](https://github.com/shahidulkareem)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipdanic%2Fspicy-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilipdanic%2Fspicy-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipdanic%2Fspicy-datatable/lists"}