From 60dcd7efbf68dc55d2d76cacc77c5c75ca9ae6ef Mon Sep 17 00:00:00 2001
From: John Betancur <johnnyazee@gmail.com>
Date: Tue, 26 Oct 2021 21:41:11 -0400
Subject: [PATCH] update expandableComponentProps docs

---
 stories/DataTable/expandable/basic.mdx | 35 +++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/stories/DataTable/expandable/basic.mdx b/stories/DataTable/expandable/basic.mdx
index 503bb50e..531f0c60 100644
--- a/stories/DataTable/expandable/basic.mdx
+++ b/stories/DataTable/expandable/basic.mdx
@@ -31,7 +31,9 @@ You'll notice that `expandableRowsComponent` has a function signtaure of `({ dat
 
 ## TypeScript
 
-With TypeScript we'll need to use `ExpanderComponentProps` and pass it our type or interface. Here's a fully working example:
+### Basic Expandable component
+
+With TypeScript we'll need to use the `ExpanderComponentProps` type and pass it our type or interface. Here's a fully working example:
 
 ```ts
 import * as React from 'react';
@@ -68,6 +70,37 @@ function MyComponent() {
 }
 ```
 
+### expandableComponentProps
+
+expandableComponentProps allows you to pass additional props to your expander component and prevents TypeScript from complaining:
+
+```ts
+import * as React from 'react';
+import DataTable, { ExpanderComponentProps } from 'react-data-table-component';
+
+interface Row {
+	title: string;
+	director: string;
+	year: string;
+}
+
+interface Props extends ExpanderComponentProps<Row> {
+	// currently, props that extend ExpanderComponentProps must be set to optional.
+	someTitleProp?: string;
+}
+
+const ExpandableRowComponent: React.FC<Props> = ({ data, someTitleProp }) => {
+	return (
+		<>
+			<p>{someTitleProp}</p>
+			<p>{data.title}</p>
+			<p>{data.director}</p>
+			<p>{data.year}</p>
+		</>
+	);
+};
+```
+
 ## Accessibility
 
 You can tab through expanders and use the space bar or enter keys to expand.