diff --git a/package.json b/package.json index c57ded9c..8831f806 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-data-table-component", - "version": "7.4.3", + "version": "7.4.4", "description": "A simple to use declarative react based data table", "main": "dist/index.cjs.js", "module": "dist/index.es.js", @@ -66,7 +66,7 @@ "eslint-config-prettier": "^8.3.0", "eslint-config-react-app": "^6.0.0", "eslint-plugin-import": "^2.24.2", - "eslint-plugin-jest": "^24.5.2", + "eslint-plugin-jest": "^25.0.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.26.1", @@ -75,7 +75,7 @@ "gh-pages": "^3.2.3", "jest": "^27.2.5", "jest-styled-components": "^7.0.5", - "jest-watch-typeahead": "^0.6.4", + "jest-watch-typeahead": "^1.0.0", "lodash-es": "^4.17.21", "memoize-one": "^5.2.1", "moment": "^2.29.1", diff --git a/src/DataTable/TableCol.tsx b/src/DataTable/TableCol.tsx index 3c8515ce..4e3b4429 100644 --- a/src/DataTable/TableCol.tsx +++ b/src/DataTable/TableCol.tsx @@ -32,9 +32,9 @@ const sortableCSS = css` transform: 'translate3d(0, 0, 0)'; ${({ sortActive }) => (sortActive ? 'opacity: 1' : 'opacity: 0')}; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; backface-visibility: hidden; transform-style: preserve-3d; transition-duration: 95ms; diff --git a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap index f9e03ff5..6bfba6c5 100644 --- a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -3302,9 +3302,9 @@ exports[`DataTable::Pagination should navigate to page 1 if the table is sorted transform: 'translate3d(0, 0, 0)'; opacity: 1; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -9815,9 +9815,9 @@ exports[`DataTable::columns should render correctly when column.sortable = true transform: 'translate3d(0, 0, 0)'; opacity: 0; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -21910,9 +21910,9 @@ exports[`DataTable::sorting a custom column sorting function is used 1`] = ` transform: 'translate3d(0, 0, 0)'; opacity: 1; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -22226,9 +22226,9 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe transform: 'translate3d(0, 0, 0)'; opacity: 1; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -22542,9 +22542,9 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe transform: 'translate3d(0, 0, 0)'; opacity: 1; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -23127,9 +23127,9 @@ exports[`DataTable::sorting should render correctly when a column is sorted from transform: 'translate3d(0, 0, 0)'; opacity: 1; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -23443,9 +23443,9 @@ exports[`DataTable::sorting should render correctly when a column is sorted in d transform: 'translate3d(0, 0, 0)'; opacity: 1; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -23746,9 +23746,9 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon 1`] = transform: 'translate3d(0, 0, 0)'; opacity: 0; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -24067,9 +24067,9 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon and c transform: 'translate3d(0, 0, 0)'; opacity: 0; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -24401,9 +24401,9 @@ exports[`DataTable::sorting should render correctly with a default sort field an transform: 'translate3d(0, 0, 0)'; opacity: 0; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -24729,9 +24729,9 @@ exports[`DataTable::sorting should render correctly with a default sort field an transform: 'translate3d(0, 0, 0)'; opacity: 0; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -25060,9 +25060,9 @@ exports[`DataTable::sorting should render correctly with a defaultSortAsc = fals transform: 'translate3d(0, 0, 0)'; opacity: 0; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; @@ -25391,9 +25391,9 @@ exports[`DataTable::sorting should sort if the column is selected and the Enter transform: 'translate3d(0, 0, 0)'; opacity: 1; color: inherit; - font-size: 18px !important; - height: 18px !important; - width: 18px !important; + font-size: 18px; + height: 18px; + width: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; diff --git a/src/DataTable/types.ts b/src/DataTable/types.ts index 1d7910c1..64f8fe39 100644 --- a/src/DataTable/types.ts +++ b/src/DataTable/types.ts @@ -15,7 +15,8 @@ export type Selector = (row: T, rowIndex?: number) => Primitive; export type SortFunction = (rows: T[], field: Selector, sortDirection: SortOrder) => T[]; export type TableRow = Record; export type ComponentProps = Record; -export type ExpandableRowsComponent = React.ComponentType<{ data: T }>; +export type ExpanderComponentProps = { data: T }; +export type ExpandableRowsComponent = React.ComponentType>; export type PaginationChangePage = (page: number, totalRows: number) => void; export type PaginationChangeRowsPerPage = (currentRowsPerPage: number, currentPage: number) => void; export type PaginationComponentProps = { diff --git a/src/index.ts b/src/index.ts index 8a4bbd87..45f54153 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,6 +11,7 @@ export type { Theme, Themes, ConditionalStyles, + ExpanderComponentProps, PaginationComponentProps, PaginationOptions, PaginationServerOptions, diff --git a/stories/DataTable/KitchenSink.stories.tsx b/stories/DataTable/KitchenSink.stories.tsx index 05180ee7..d4f83d70 100644 --- a/stories/DataTable/KitchenSink.stories.tsx +++ b/stories/DataTable/KitchenSink.stories.tsx @@ -7,7 +7,7 @@ import TextField from '@material-ui/core/TextField'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import data from '../constants/sampleMovieData'; -import DataTable, { Alignment, Direction, TableProps, TableColumn } from '../../src/index'; +import DataTable, { Alignment, Direction, TableProps, TableColumn, ExpanderComponentProps } from '../../src/index'; interface Row { title: string; @@ -15,7 +15,7 @@ interface Row { year: string; } -const ExpandableRowComponent: React.FC<{ data: Row }> = ({ data }) => { +const ExpandableRowComponent: React.FC> = ({ data }) => { return ( <>

{data.title}

diff --git a/stories/DataTable/expandable/basic.mdx b/stories/DataTable/expandable/basic.mdx index 6945146b..503bb50e 100644 --- a/stories/DataTable/expandable/basic.mdx +++ b/stories/DataTable/expandable/basic.mdx @@ -6,17 +6,12 @@ Adding Expandable Rows functionality is easy. Let's make our rows expandable: ```js function MyComponent() { - return ( - - ); -}; + return ; +} ``` ## Custom Expander component + Next, we'll need to create a custom component to display our data and pass it into `DataTable`: ```js @@ -24,23 +19,55 @@ Next, we'll need to create a custom component to display our data and pass it in const ExpandedComponent = ({ data }) =>
{JSON.stringify(data, null, 2)}
; function MyComponent() { - return ( - - ); -}; + return ; +} ``` You'll notice that `expandableRowsComponent` has a function signtaure of `({ data }) => ...`. React Data Table handles passing your row `data` into your custom expandable component so you can access that rows fields. - + +## TypeScript + +With TypeScript we'll need to use `ExpanderComponentProps` and pass it our type or interface. Here's a fully working example: + +```ts +import * as React from 'react'; +import DataTable, { ExpanderComponentProps } from 'react-data-table-component'; + +type DataRow = { + title: string; + director: string; + year: string; +}; + +const columns: TableColumn[] = [ + { + name: 'Title', + selector: row => row.title, + }, + { + name: 'Director', + selector: row => row.director, + }, + { + name: 'Year', + selector: row => row.year, + }, +]; + +// data provides access to your row data +const ExpandedComponent: React.FC> = ({ data }) => { + return
{JSON.stringify(data, null, 2)}
; +}; + +function MyComponent() { + return ; +} +``` + ## Accessibility You can tab through expanders and use the space bar or enter keys to expand. diff --git a/stories/typescript.stories.mdx b/stories/typescript.stories.mdx index 35515aab..bacd93a1 100644 --- a/stories/typescript.stories.mdx +++ b/stories/typescript.stories.mdx @@ -106,6 +106,7 @@ The following are going to be the most commonly used and accept a generic `T` pa - `TableColumn` - `TableProps` - `ConditionalStyles` +- `ExpanderComponentProps` - `PaginationComponentProps` The following types are available for advanced or niche use cases: diff --git a/yarn.lock b/yarn.lock index 8b85b8e8..2e7e3b84 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3794,6 +3794,11 @@ ansi-regex@^5.0.1: resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== +ansi-regex@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a" + integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA== + ansi-styles@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" @@ -4754,6 +4759,11 @@ char-regex@^1.0.2: resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf" integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw== +char-regex@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.0.tgz#16f98f3f874edceddd300fda5d58df380a7641a6" + integrity sha512-oGu2QekBMXgyQNWPDRQ001bjvDnZe4/zBTz37TMbiKz1NbNiyiH5hRkobe7npRN6GfbGbxMYFck/vQ1r9c1VMA== + character-entities-legacy@^1.0.0: version "1.1.4" resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1" @@ -5414,7 +5424,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: dependencies: ms "2.0.0" -debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1: +debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee" integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ== @@ -5428,6 +5438,13 @@ debug@^3.0.0, debug@^3.2.7: dependencies: ms "^2.1.1" +debug@^4.0.1: + version "4.3.2" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b" + integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw== + dependencies: + ms "2.1.2" + decamelize-keys@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9" @@ -6074,10 +6091,10 @@ eslint-plugin-import@^2.24.2: resolve "^1.20.0" tsconfig-paths "^3.11.0" -eslint-plugin-jest@^24.5.2: - version "24.5.2" - resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.5.2.tgz#f71f98f27fd18b50f55246ca090f36d1730e36a6" - integrity sha512-lrI3sGAyZi513RRmP08sIW241Ti/zMnn/6wbE4ZBhb3M2pJ9ztaZMnSKSKKBUfotVdwqU8W1KtD8ao2/FR8DIg== +eslint-plugin-jest@^25.0.1: + version "25.0.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-25.0.1.tgz#1a4aec26bb9806db1132de18cc7df7cab4b0ca4e" + integrity sha512-h54W6EOFGWHvKmGQul1Ahc8nLfzWR7jbynjeb4NT/acg6yOaRPQv6MXeSuQO3a7+21xaVtmULowYANuu4JIimQ== dependencies: "@typescript-eslint/experimental-utils" "^4.0.1" @@ -8632,18 +8649,18 @@ jest-validate@^27.2.5: leven "^3.1.0" pretty-format "^27.2.5" -jest-watch-typeahead@^0.6.4: - version "0.6.4" - resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.6.4.tgz#ea70bf1bec34bd4f55b5b72d471b02d997899c3e" - integrity sha512-tGxriteVJqonyrDj/xZHa0E2glKMiglMLQqISLCjxLUfeueRBh9VoRF2FKQyYO2xOqrWDTg7781zUejx411ZXA== +jest-watch-typeahead@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-1.0.0.tgz#4de2ca1eb596acb1889752afbab84b74fcd99173" + integrity sha512-jxoszalAb394WElmiJTFBMzie/RDCF+W7Q29n5LzOPtcoQoHWfdUtHFkbhgf5NwWe8uMOxvKb/g7ea7CshfkTw== dependencies: ansi-escapes "^4.3.1" chalk "^4.0.0" jest-regex-util "^27.0.0" jest-watcher "^27.0.0" - slash "^3.0.0" - string-length "^4.0.1" - strip-ansi "^6.0.0" + slash "^4.0.0" + string-length "^5.0.1" + strip-ansi "^7.0.1" jest-watcher@^27.0.0: version "27.0.2" @@ -11803,6 +11820,11 @@ slash@^3.0.0: resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== +slash@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7" + integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew== + slice-ansi@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b" @@ -12059,6 +12081,14 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" +string-length@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/string-length/-/string-length-5.0.1.tgz#3d647f497b6e8e8d41e422f7e0b23bc536c8381e" + integrity sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow== + dependencies: + char-regex "^2.0.0" + strip-ansi "^7.0.1" + string-width@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3" @@ -12094,6 +12124,15 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2 is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.0" +string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + "string.prototype.matchall@^4.0.0 || ^3.0.1": version "4.0.4" resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz#608f255e93e072107f5de066f81a2dfb78cf6b29" @@ -12197,6 +12236,20 @@ strip-ansi@^5.1.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2" + integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw== + dependencies: + ansi-regex "^6.0.1" + strip-bom@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3" @@ -12419,7 +12472,19 @@ symbol.prototype.description@^1.0.0: has-symbols "^1.0.1" object.getownpropertydescriptors "^2.1.2" -table@^6.0.9, table@^6.6.0: +table@^6.0.9: + version "6.7.2" + resolved "https://registry.yarnpkg.com/table/-/table-6.7.2.tgz#a8d39b9f5966693ca8b0feba270a78722cbaf3b0" + integrity sha512-UFZK67uvyNivLeQbVtkiUs8Uuuxv24aSL4/Vil2PJVtMgU8Lx0CYkP12uCGa3kjyQzOSgV1+z9Wkb82fCGsO0g== + dependencies: + ajv "^8.0.1" + lodash.clonedeep "^4.5.0" + lodash.truncate "^4.4.2" + slice-ansi "^4.0.0" + string-width "^4.2.3" + strip-ansi "^6.0.1" + +table@^6.6.0: version "6.7.1" resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2" integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==