{"id":19838276,"url":"https://github.com/barisates/react-data-table-component-extensions","last_synced_at":"2025-05-01T18:31:07.899Z","repository":{"id":35155424,"uuid":"212758524","full_name":"barisates/react-data-table-component-extensions","owner":"barisates","description":"Export table data as a CSV or Excel file, filter and print the data.","archived":false,"fork":false,"pushed_at":"2023-02-27T15:31:12.000Z","size":5661,"stargazers_count":44,"open_issues_count":40,"forks_count":25,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-18T20:24:52.263Z","etag":null,"topics":["datatable","extensions","react","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/barisates.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":"2019-10-04T07:24:09.000Z","updated_at":"2023-10-20T14:30:39.000Z","dependencies_parsed_at":"2024-06-18T18:30:19.866Z","dependency_job_id":null,"html_url":"https://github.com/barisates/react-data-table-component-extensions","commit_stats":{"total_commits":35,"total_committers":7,"mean_commits":5.0,"dds":"0.48571428571428577","last_synced_commit":"4359146cff9db48ae82984e235bcda0eb40975b9"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barisates%2Freact-data-table-component-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barisates%2Freact-data-table-component-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barisates%2Freact-data-table-component-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barisates%2Freact-data-table-component-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barisates","download_url":"https://codeload.github.com/barisates/react-data-table-component-extensions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223948574,"owners_count":17230132,"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":["datatable","extensions","react","react-component","reactjs"],"created_at":"2024-11-12T12:17:13.680Z","updated_at":"2024-11-12T12:17:14.298Z","avatar_url":"https://github.com/barisates.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-data-table-component-extensions\nExport table data as a CSV or Excel file, filter and print the data.\n\n[![npm package][npm-image]][npm-url]\n[![Build Status][travis-image]][travis-url]\n[![Dependencies Status][david-image]][david-url]\n[![Package Size][bundlephobia-image]][bundlephobia-url]\n\n## Getting started\n\n#### Install with NPM:\n\n[Install the data-table component first,](https://github.com/jbetancur/react-data-table-component \"Install the data-table component first.\")\n```\n$ npm install react-data-table-component styled-components\n```\n\nthen install the data-table-extensions extension.\n```\n$ npm install react-data-table-component-extensions\n```\n\n#### Usage\n\n**Live Demo [CodeSandbox](https://codesandbox.io/s/data-table-extensions-qxpv4?fontsize=14 \"CodeSandbox\")**\n\n\n##### Features\n- Export the file in \\*.csv and \\*.xls format.\n- Print the table data.\n- Filter table data by all columns.\n- Filter table by digit length. Default value is 2.\n\n#### Example\nExample of filtering table data and export, print buttons.\n\n![Default Theme](http://barisates.com/git/dt/extensions.jpg?h \"Example\")\n\n```jsx\n// App.js\nimport React from 'react';\nimport DataTable from 'react-data-table-component';\nimport DataTableExtensions from 'react-data-table-component-extensions';\nimport 'react-data-table-component-extensions/dist/index.css';\nimport { columns, data } from './Data.js';\n\nfunction App() {\n  const tableData = {\n    columns,\n    data,\n  };\n\n  return (\n    \u003cDataTableExtensions\n      {...tableData}\n    \u003e\n      \u003cDataTable\n        noHeader\n        defaultSortField=\"id\"\n        defaultSortAsc={false}\n        pagination\n        highlightOnHover\n      /\u003e\n    \u003c/DataTableExtensions\u003e\n  );\n}\n\nexport default App;\n```\n```jsx\n// Data.js\nexport const columns = [\n  {\n    name: 'Title',\n    selector: 'title',\n    sortable: true,\n  },\n  {\n    name: 'Director',\n    selector: 'director',\n    sortable: true,\n  },\n  {\n    name: 'Genres',\n    selector: 'genres',\n    sortable: true,\n    cell: d =\u003e \u003cspan\u003e{d.genres.join(', ')}\u003c/span\u003e,\n  },\n  {\n    name: 'Year',\n    selector: 'year',\n    sortable: true,\n  },\n];\n\nexport const data = [\n  {\n    title: 'Beetlejuice',\n    year: '1988',\n    genres: [\n      'Comedy',\n      'Fantasy',\n    ],\n    director: 'Tim Burton',\n  },\n  {\n    id: 2,\n    title: 'The Cotton Club',\n    year: '1984',\n    runtime: '127',\n    genres: [\n      'Crime',\n      'Drama',\n      'Music',\n    ],\n    director: 'Francis Ford Coppola',\n  }];\n```\n#### Properties\n\nDescriptions and configuration settings for component properties.\n\n| Property | Type | Required | Default | Description |\n|--------------------------|---------------------|----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| columns | array\u003cColumns\u003e | yes | [ ] | Table column configuration |\n| data | array\u003cObject\u003e | no | [ ] | Table data |\n| filter | bool | no | true | Enable input filter |\n| filterPlaceholder | string | no | Filter Table | Default placeholder for the filter field |\n| **filterHidden** | bool | no | true | Filter hidden fields |\n| export | bool | no | true | Enable export button |\n| print | bool | no | true | Enable print button |\n| exportHeaders | bool | no | false | Exports data with table headers |\n| filterDigit | number | no | 2 | Number of digts to use in search. |\n| fileName | string | no | document.title | Set exported csv and excel file name |\n\n\n##### Column Properties\n| Property | Type | Required | Description |\n|--------------------------|---------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| cellExport | func | no | Export configuration `row =\u003e ({Title: row.Title, Example: row.Example})` |\n------------\n#### Author\n\n**Barış Ateş**\n - http://barisates.com\n - [github/barisates](https://github.com/barisates \"github/barisates\")\n\n[npm-image]:https://img.shields.io/npm/v/react-data-table-component-extensions.svg\n[npm-url]:https://www.npmjs.com/package/react-data-table-component-extensions\n[travis-image]:https://travis-ci.org/barisates/react-data-table-component-extensions.svg?branch=master\n[travis-url]:https://travis-ci.org/barisates/react-data-table-component-extensions\n[david-image]:https://david-dm.org/barisates/react-data-table-component-extensions.svg\n[david-url]:https://david-dm.org/barisates/react-data-table-component-extensions\n[bundlephobia-image]:https://badgen.net/bundlephobia/minzip/react-data-table-component-extensions\n[bundlephobia-url]:https://bundlephobia.com/result?p=react-data-table-component-extensions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarisates%2Freact-data-table-component-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarisates%2Freact-data-table-component-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarisates%2Freact-data-table-component-extensions/lists"}