fix: made currentSortColumnId and currentSortDirection optional

Author: ravgeetdhillon

src/DataTable/TableCol.tsx

@@ -98,8 +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;
+	currentSortColumnId?: string | number | null;
+	currentSortDirection?: SortOrder;
 };
 
 function TableCol<T>({
@@ -172,14 +172,19 @@ function TableCol<T>({
 	};
 
 	const renderNativeSortIcon = (sortActive: boolean) => (
-		<NativeSortIcon sortActive={sortActive} sortDirection={currentSortDirection} />
+		<NativeSortIcon sortActive={sortActive} sortDirection={currentSortDirection ?? sortDirection} />
 	);
 
 	const renderCustomSortIcon = () => (
 		<span className={[sortDirection, '__rdt_custom_sort_icon__'].join(' ')}>{sortIcon}</span>
 	);
 
-	const sortActive = !!(column.sortable && currentSortColumnId !== null && equalizeId(currentSortColumnId, column.id));
+	const sortActive = (() => {
+		if (currentSortColumnId !== null) {
+			return !!(column.sortable && equalizeId(currentSortColumnId, column.id));
+		}
+		return !!(column.sortable && equalizeId(selectedColumn.id, 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,7 +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';
+// import { SortOrder } from './types';
 
 export const defaultProps = {
 	columns: [],
@@ -110,5 +110,5 @@ export const defaultProps = {
 	keepExpandableFirst: false,
 	footer: null,
 	currentSortColumnId: null,
-	currentSortDirection: 'asc' as SortOrder,
+	currentSortDirection: undefined,
 };

src/DataTable/types.ts

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