From e95a0d1c7ba002f793b520f133d1f56d5ecbb30c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CJohn?= Date: Sun, 10 Oct 2021 10:21:44 -0400 Subject: [PATCH 1/2] fixes component types --- src/DataTable/ExpanderRow.tsx | 13 ++++++------- src/DataTable/TableRow.tsx | 4 ++-- src/DataTable/types.ts | 21 ++++++++++++++------- src/index.ts | 1 + stories/DataTable/KitchenSink.stories.tsx | 11 +++++++++++ stories/typescript.stories.mdx | 1 + 6 files changed, 35 insertions(+), 16 deletions(-) diff --git a/src/DataTable/ExpanderRow.tsx b/src/DataTable/ExpanderRow.tsx index e41b07cf..3a7ac577 100644 --- a/src/DataTable/ExpanderRow.tsx +++ b/src/DataTable/ExpanderRow.tsx @@ -13,29 +13,28 @@ const ExpanderRowStyle = styled.div<{ type ExpanderRowProps = { data: T; - component: ExpandableRowsComponent; + ExpanderComponent: ExpandableRowsComponent; extendedRowStyle: CSSObject; extendedClassNames: string; - componentProps: ComponentProps; + expanderComponentProps: ComponentProps; }; function ExpanderRow({ data, - component, - componentProps, + ExpanderComponent, + expanderComponentProps, extendedRowStyle, extendedClassNames, }: ExpanderRowProps): 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 ( - + ); } -export default React.memo(ExpanderRow); +export default React.memo(ExpanderRow) as typeof ExpanderRow; diff --git a/src/DataTable/TableRow.tsx b/src/DataTable/TableRow.tsx index 9a939c6b..1b4121d6 100644 --- a/src/DataTable/TableRow.tsx +++ b/src/DataTable/TableRow.tsx @@ -247,8 +247,8 @@ function Row({ data={row} extendedRowStyle={inheritStyles} extendedClassNames={classNames} - component={expandableRowsComponent} - componentProps={expandableRowsComponentProps} + ExpanderComponent={expandableRowsComponent} + expanderComponentProps={expandableRowsComponentProps} /> )} diff --git a/src/DataTable/types.ts b/src/DataTable/types.ts index 6021f68a..1d7910c1 100644 --- a/src/DataTable/types.ts +++ b/src/DataTable/types.ts @@ -7,8 +7,6 @@ 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 = (a: T, b: T) => number; export type ExpandRowToggled = (expanded: boolean, row: T) => void; export type Format = (row: T, rowIndex: number) => React.ReactNode; @@ -16,9 +14,18 @@ export type RowState = ((row: T) => boolean) | null; export type Selector = (row: T, rowIndex?: number) => Primitive; export type SortFunction = (rows: T[], field: Selector, sortDirection: SortOrder) => T[]; export type TableRow = Record; -export type ExpandableRowsComponent = React.ComponentType>; -export type PaginationComponent = React.ComponentType>; export type ComponentProps = Record; +export type ExpandableRowsComponent = 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; export type TableProps = { actions?: React.ReactNode | React.ReactNode[]; @@ -41,7 +48,7 @@ export type TableProps = { expandableRowDisabled?: RowState; expandableRowExpanded?: RowState; expandableRows?: boolean; - expandableRowsComponent?: ExpandableRowsComponent; + expandableRowsComponent?: ExpandableRowsComponent; expandableRowsComponentProps?: ComponentProps; expandableRowsHideExpander?: boolean; expandOnRowClicked?: boolean; @@ -54,8 +61,8 @@ export type TableProps = { 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; diff --git a/src/index.ts b/src/index.ts index 653d7e4a..8a4bbd87 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,6 +11,7 @@ export type { Theme, Themes, ConditionalStyles, + PaginationComponentProps, PaginationOptions, PaginationServerOptions, ContextMessage, diff --git a/stories/DataTable/KitchenSink.stories.tsx b/stories/DataTable/KitchenSink.stories.tsx index f44f6c85..05180ee7 100644 --- a/stories/DataTable/KitchenSink.stories.tsx +++ b/stories/DataTable/KitchenSink.stories.tsx @@ -15,6 +15,16 @@ interface Row { year: string; } +const ExpandableRowComponent: React.FC<{ data: Row }> = ({ data }) => { + return ( + <> +

{data.title}

+

{data.director}

+

{data.year}

+ + ); +}; + const subHeaderComponent = (
@@ -99,6 +109,7 @@ function KitchenSinkStory({ selectableRowsSingle={selectableRowsSingle} selectableRowsVisibleOnly={selectableRowsVisibleOnly} expandableRows={expandableRows} + expandableRowsComponent={ExpandableRowComponent} expandOnRowClicked={expandOnRowClicked} expandOnRowDoubleClicked={expandOnRowDoubleClicked} expandableRowsHideExpander={expandableRowsHideExpander} diff --git a/stories/typescript.stories.mdx b/stories/typescript.stories.mdx index bc5e729d..ad5ad559 100644 --- a/stories/typescript.stories.mdx +++ b/stories/typescript.stories.mdx @@ -116,3 +116,4 @@ The following types are less commonly used but available for niche cases: - `PaginationOptions` - `PaginationServerOptions` - `ContextMessage` +- `SortOrder` From 40c1f77b71fd08b6579f408b7f40caebb011b4fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CJohn?= Date: Sun, 10 Oct 2021 10:40:02 -0400 Subject: [PATCH 2/2] fix unconfigurable property error --- package.json | 2 +- src/DataTable/util.ts | 56 +++++++++++++++++++++---------------------- 2 files changed, 28 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 08f84bce..c57ded9c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-data-table-component", - "version": "7.4.2", + "version": "7.4.3", "description": "A simple to use declarative react based data table", "main": "dist/index.cjs.js", "module": "dist/index.es.js", diff --git a/src/DataTable/util.ts b/src/DataTable/util.ts index 99afb173..62581587 100644 --- a/src/DataTable/util.ts +++ b/src/DataTable/util.ts @@ -29,42 +29,40 @@ export function sort( return sortFn(rows.slice(0), selector as Selector, direction); } - return rows - .sort((a: T, b: T) => { - let aValue; - let bValue; - - if (typeof selector === 'string') { - aValue = parseSelector(a, selector); - bValue = parseSelector(b, selector); - } else { - aValue = selector(a); - bValue = selector(b); - } + return rows.slice(0).sort((a: T, b: T) => { + let aValue; + let bValue; + + if (typeof selector === 'string') { + aValue = parseSelector(a, selector); + bValue = parseSelector(b, selector); + } else { + aValue = selector(a); + bValue = selector(b); + } - if (direction === 'asc') { - if (aValue < bValue) { - return -1; - } + if (direction === 'asc') { + if (aValue < bValue) { + return -1; + } - if (aValue > bValue) { - return 1; - } + if (aValue > bValue) { + return 1; } + } - if (direction === 'desc') { - if (aValue > bValue) { - return -1; - } + if (direction === 'desc') { + if (aValue > bValue) { + return -1; + } - if (aValue < bValue) { - return 1; - } + if (aValue < bValue) { + return 1; } + } - return 0; - }) - .slice(0); + return 0; + }); } // TODO: string based selectors will be removed in v8