feat: added props for supplying current sort column and sort direction from outside of table

Author: ravgeetdhillon

src/DataTable/DataTable.tsx

@@ -121,6 +121,8 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 		onColumnOrderChange = defaultProps.onColumnOrderChange,
 		keepExpandableFirst = defaultProps.keepExpandableFirst,
 		footer = defaultProps.footer,
+		currentSortColumnId = defaultProps.currentSortColumnId,
+		currentSortDirection = defaultProps.currentSortDirection,
 	} = props;
 
 	const {
@@ -492,6 +494,8 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 											onDragEnter={handleDragEnter}
 											onDragLeave={handleDragLeave}
 											draggingColumnId={draggingColumnId}
+											currentSortColumnId={currentSortColumnId}
+											currentSortDirection={currentSortDirection}
 										/>
 									))}
 								</HeadRow>

src/DataTable/TableCol.tsx

@@ -98,6 +98,8 @@ type TableColProps<T> = {
 	onDragEnd: (e: React.DragEvent<HTMLDivElement>) => void;
 	onDragEnter: (e: React.DragEvent<HTMLDivElement>) => void;
 	onDragLeave: (e: React.DragEvent<HTMLDivElement>) => void;
+	currentSortColumnId: string | number | null;
+	currentSortDirection: SortOrder;
 };
 
 function TableCol<T>({
@@ -118,6 +120,8 @@ function TableCol<T>({
 	onDragEnd,
 	onDragEnter,
 	onDragLeave,
+	currentSortColumnId,
+	currentSortDirection,
 }: TableColProps<T>): JSX.Element | null {
 	React.useEffect(() => {
 		if (typeof column.selector === 'string') {
@@ -168,14 +172,14 @@ function TableCol<T>({
 	};
 
 	const renderNativeSortIcon = (sortActive: boolean) => (
-		<NativeSortIcon sortActive={sortActive} sortDirection={sortDirection} />
+		<NativeSortIcon sortActive={sortActive} sortDirection={currentSortDirection} />
 	);
 
 	const renderCustomSortIcon = () => (
 		<span className={[sortDirection, '__rdt_custom_sort_icon__'].join(' ')}>{sortIcon}</span>
 	);
 
-	const sortActive = !!(column.sortable && equalizeId(selectedColumn.id, column.id));
+	const sortActive = !!(column.sortable && currentSortColumnId !== null && equalizeId(currentSortColumnId, column.id));
 	const disableSort = !column.sortable || disabled;
 	const nativeSortIconLeft = column.sortable && !sortIcon && !column.right;
 	const nativeSortIconRight = column.sortable && !sortIcon && column.right;

src/DataTable/defaultProps.tsx

@@ -7,6 +7,7 @@ import ExpanderCollapsedIcon from '../icons/ExpanderCollapsedIcon';
 import ExpanderExpandedIcon from '../icons/ExpanderExpandedIcon';
 import { noop } from './util';
 import { Alignment, Direction } from './constants';
+import { SortOrder } from './types';
 
 export const defaultProps = {
 	columns: [],
@@ -108,4 +109,6 @@ export const defaultProps = {
 	onColumnOrderChange: noop,
 	keepExpandableFirst: false,
 	footer: null,
+	currentSortColumnId: null,
+	currentSortDirection: 'asc' as SortOrder,
 };

src/DataTable/types.ts

@@ -118,6 +118,8 @@ export type TableProps<T> = {
 	 *  */
 	title?: string | React.ReactNode;
 	footer?: React.ReactNode;
+	currentSortColumnId: string | number | null;
+	currentSortDirection: SortOrder;
 };
 
 export type TableColumnBase = {