Merge pull request #941 from jbetancur/fix/934

fixes component types

src/DataTable/ExpanderRow.tsx

@@ -13,29 +13,28 @@ const ExpanderRowStyle = styled.div<{
 
 type ExpanderRowProps<T> = {
 	data: T;
-	component: ExpandableRowsComponent;
+	ExpanderComponent: ExpandableRowsComponent<T>;
 	extendedRowStyle: CSSObject;
 	extendedClassNames: string;
-	componentProps: ComponentProps;
+	expanderComponentProps: ComponentProps;
 };
 
 function ExpanderRow<T>({
 	data,
-	component,
-	componentProps,
+	ExpanderComponent,
+	expanderComponentProps,
 	extendedRowStyle,
 	extendedClassNames,
 }: ExpanderRowProps<T>): JSX.Element {
-	const ExpandableComponent = component;
 	// we need to strip of rdt_TableRow from extendedClassNames
 	const classNamesSplit = extendedClassNames.split(' ').filter(c => c !== 'rdt_TableRow');
 	const classNames = ['rdt_ExpanderRow', ...classNamesSplit].join(' ');
 
 	return (
 		<ExpanderRowStyle className={classNames} extendedRowStyle={extendedRowStyle}>
-			<ExpandableComponent data={data} {...componentProps} />
+			<ExpanderComponent data={data} {...expanderComponentProps} />
 		</ExpanderRowStyle>
 	);
 }
 
-export default React.memo(ExpanderRow);
+export default React.memo(ExpanderRow) as typeof ExpanderRow;

src/DataTable/TableRow.tsx

@@ -247,8 +247,8 @@ function Row<T>({
 					data={row}
 					extendedRowStyle={inheritStyles}
 					extendedClassNames={classNames}
-					component={expandableRowsComponent}
-					componentProps={expandableRowsComponentProps}
+					ExpanderComponent={expandableRowsComponent}
+					expanderComponentProps={expandableRowsComponentProps}
 				/>
 			)}
 		</>

src/DataTable/types.ts

@@ -7,18 +7,25 @@ export enum SortOrder {
 }
 
 export type Primitive = string | number | boolean | bigint;
-export type ChangePage = (page: number, totalRows: number) => void;
-export type ChangeRowsPerPage = (currentRowsPerPage: number, currentPage: number) => void;
 export type ColumnSortFunction<T> = (a: T, b: T) => number;
 export type ExpandRowToggled<T> = (expanded: boolean, row: T) => void;
 export type Format<T> = (row: T, rowIndex: number) => React.ReactNode;
 export type RowState<T> = ((row: T) => boolean) | null;
 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 ExpandableRowsComponent = React.ComponentType<Record<string, unknown>>;
-export type PaginationComponent = React.ComponentType<Record<string, unknown>>;
 export type ComponentProps = Record<string, unknown>;
+export type ExpandableRowsComponent<T> = React.ComponentType<{ data: T }>;
+export type PaginationChangePage = (page: number, totalRows: number) => void;
+export type PaginationChangeRowsPerPage = (currentRowsPerPage: number, currentPage: number) => void;
+export type PaginationComponentProps = {
+	rowsPerPage: number;
+	rowCount: number;
+	currentPage: number;
+	onChangePage: PaginationChangePage;
+	onChangeRowsPerPage: PaginationChangeRowsPerPage;
+};
+export type PaginationComponent = React.ComponentType<PaginationComponentProps>;
 
 export type TableProps<T> = {
 	actions?: React.ReactNode | React.ReactNode[];
@@ -41,7 +48,7 @@ export type TableProps<T> = {
 	expandableRowDisabled?: RowState<T>;
 	expandableRowExpanded?: RowState<T>;
 	expandableRows?: boolean;
-	expandableRowsComponent?: ExpandableRowsComponent;
+	expandableRowsComponent?: ExpandableRowsComponent<T>;
 	expandableRowsComponentProps?: ComponentProps;
 	expandableRowsHideExpander?: boolean;
 	expandOnRowClicked?: boolean;
@@ -54,8 +61,8 @@ export type TableProps<T> = {
 	noDataComponent?: React.ReactNode;
 	noHeader?: boolean;
 	noTableHead?: boolean;
-	onChangePage?: ChangePage;
-	onChangeRowsPerPage?: ChangeRowsPerPage;
+	onChangePage?: PaginationChangePage;
+	onChangeRowsPerPage?: PaginationChangeRowsPerPage;
 	onRowClicked?: (row: T, e: React.MouseEvent) => void;
 	onRowDoubleClicked?: (row: T, e: React.MouseEvent) => void;
 	onRowExpandToggled?: ExpandRowToggled<T>;

src/index.ts

@@ -11,6 +11,7 @@ export type {
 	Theme,
 	Themes,
 	ConditionalStyles,
+	PaginationComponentProps,
 	PaginationOptions,
 	PaginationServerOptions,
 	ContextMessage,

stories/DataTable/KitchenSink.stories.tsx

@@ -15,6 +15,16 @@ interface Row {
 	year: string;
 }
 
+const ExpandableRowComponent: React.FC<{ data: Row }> = ({ data }) => {
+	return (
+		<>
+			<p>{data.title}</p>
+			<p>{data.director}</p>
+			<p>{data.year}</p>
+		</>
+	);
+};
+
 const subHeaderComponent = (
 	<div style={{ display: 'flex', alignItems: 'center' }}>
 		<TextField id="outlined-basic" label="Search" variant="outlined" size="small" style={{ margin: '5px' }} />
@@ -99,6 +109,7 @@ function KitchenSinkStory({
 			selectableRowsSingle={selectableRowsSingle}
 			selectableRowsVisibleOnly={selectableRowsVisibleOnly}
 			expandableRows={expandableRows}
+			expandableRowsComponent={ExpandableRowComponent}
 			expandOnRowClicked={expandOnRowClicked}
 			expandOnRowDoubleClicked={expandOnRowDoubleClicked}
 			expandableRowsHideExpander={expandableRowsHideExpander}

stories/typescript.stories.mdx

@@ -103,11 +103,12 @@ In addition to `TableColumn` we can also access various other React Data Table t
 
 The following are going to be the most commonly used and accept a generic `T` parameter, which will always be your data's type or interface:
 
-- `TableProps<T>`
 - `TableColumn<T>`
+- `TableProps<T>`
 - `ConditionalStyles<T>`
+- `PaginationComponentProps`
 
-The following types are less commonly used but available for niche cases:
+The following types are available for advanced or niche use cases:
 
 - `TableRow`
 - `TableStyles`
@@ -116,3 +117,4 @@ The following types are less commonly used but available for niche cases:
 - `PaginationOptions`
 - `PaginationServerOptions`
 - `ContextMessage`
+- `SortOrder`