Merge pull request #944 from jbetancur/feature/expander-props

add ts expander example | expose Expa
jbetancur · Oct 11, 2021 · 5474649 · 5474649
2 parents f4e6325 + cb9b7ed
commit 5474649
Show file tree

Hide file tree

Showing 9 changed files with 174 additions and 79 deletions.
diff --git 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
@@ -32,9 +32,9 @@ const sortableCSS = css<ColumnSortableProps>`
 			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
@@ -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
@@ -15,7 +15,8 @@ export type Selector<T> = (row: T, rowIndex?: number) => Primitive;
 export type SortFunction<T> = (rows: T[], field: Selector<T>, sortDirection: SortOrder) => T[];
 export type TableRow = Record<string, unknown>;
 export type ComponentProps = Record<string, unknown>;
-export type ExpandableRowsComponent<T> = React.ComponentType<{ data: T }>;
+export type ExpanderComponentProps<T> = { data: T };
+export type ExpandableRowsComponent<T> = React.ComponentType<ExpanderComponentProps<T>>;
 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
@@ -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
@@ -7,15 +7,15 @@ 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;
 	director: string;
 	year: string;
 }
 
-const ExpandableRowComponent: React.FC<{ data: Row }> = ({ data }) => {
+const ExpandableRowComponent: React.FC<ExpanderComponentProps<Row>> = ({ data }) => {
 	return (
 		<>
 			<p>{data.title}</p>

diff --git a/stories/DataTable/expandable/basic.mdx b/stories/DataTable/expandable/basic.mdx
@@ -6,41 +6,68 @@ Adding Expandable Rows functionality is easy. Let's make our rows expandable:
 
 ```js
 function MyComponent() {
-  return (
-    <DataTable
-      columns={columns}
-      data={data}
-      expandableRows
-    />
-  );
-};
+	return <DataTable columns={columns} data={data} expandableRows />;
+}
 ```
 
 ## Custom Expander component
+
 Next, we'll need to create a custom component to display our data and pass it into `DataTable`:
 
 ```js
 // data provides access to your row data
 const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;
 
 function MyComponent() {
-  return (
-    <DataTable
-      columns={columns}
-      data={data}
-      expandableRows
-      expandableRowsComponent={ExpandedComponent}
-    />
-  );
-};
+	return <DataTable columns={columns} data={data} expandableRows expandableRowsComponent={ExpandedComponent} />;
+}
 ```
 
 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.
 
 <Canvas>
-  <Story id="expandable-basic--basic" />
+	<Story id="expandable-basic--basic" />
 </Canvas>
 
+## 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<DataRow>[] = [
+	{
+		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<ExpanderComponentProps<DataRow>> = ({ data }) => {
+	return <pre>{JSON.stringify(data, null, 2)}</pre>;
+};
+
+function MyComponent() {
+	return <DataTable columns={columns} data={data} expandableRows expandableRowsComponent={ExpandedComponent} />;
+}
+```
+
 ## 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
@@ -106,6 +106,7 @@ The following are going to be the most commonly used and accept a generic `T` pa
 - `TableColumn<T>`
 - `TableProps<T>`
 - `ConditionalStyles<T>`
+- `ExpanderComponentProps<T>`
 - `PaginationComponentProps`
 
 The following types are available for advanced or niche use cases: