[2.4.1] - enablePredefinedSort property (#36)

`enablePredefinedSort` property allows to ignore the sorting on the
first column performed when the orderBy option is not specified.

In order to not have a "breaking-change" on the current table behavior,
when `enablePredefinedSort` prop is _not_ specified the data-table will
be sorted as performed until now (hence sorted by the first sortable
column), otherwise it is not sorted, so that a "custom predefined"
sorting can be applied.

Author: Michele-Masciave

CHANGELOG.md

@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### dependabot: \#33 Bump loader-utils from 1.4.0 to 1.4.2
 
+## [2.4.1] - 2023-05-25
+
+### Added
+
+- the prop `enablePredefinedSort` to all tables. Set boolean condition for which the orderBy option should be ignored. Set as `false` by default if not specified.
+
 ## [2.4.0] - 2023-05-17
 
 ### Added

src/lib/DataTable/DataTable.tsx

@@ -31,6 +31,7 @@ export function DataTableStaticRouted<T, TRouteNames>({
   hideIfEmpty = false,
   tableClassName,
   tableStyle,
+  enablePredefinedSort = false,
 }: DataTableStaticRoutedProps<T, TRouteNames>) {
   if (hideIfEmpty === true && (!data || data.length <= 0)) return <React.Fragment />;
 
@@ -50,6 +51,7 @@ export function DataTableStaticRouted<T, TRouteNames>({
         showPaging={showPaging}
         tableClassName={tableClassName}
         tableStyle={tableStyle}
+        enablePredefinedSort={enablePredefinedSort}
       />
     </React.Fragment>
   );
@@ -70,6 +72,7 @@ export function DataTableStatic<T>({
   hideIfEmpty = false,
   tableClassName,
   tableStyle,
+  enablePredefinedSort = false,
 }: DataTableStaticProps<T>) {
   if (hideIfEmpty === true && (!data || data.length <= 0)) return <React.Fragment />;
 
@@ -89,6 +92,7 @@ export function DataTableStatic<T>({
         showPaging={showPaging}
         tableClassName={tableClassName}
         tableStyle={tableStyle}
+        enablePredefinedSort={enablePredefinedSort}
       />
     </React.Fragment>
   );
@@ -113,6 +117,7 @@ export function DataTable<T, TFilter>({
   tableStyle,
   asc,
   orderBy,
+  enablePredefinedSort = false,
 }: DataTableProps<T, TFilter>) {
   return (
     <DataTableRouted<T, TFilter, T>
@@ -134,6 +139,7 @@ export function DataTable<T, TFilter>({
       tableStyle={tableStyle}
       asc={asc}
       orderBy={orderBy}
+      enablePredefinedSort={enablePredefinedSort}
     />
   );
 }

src/lib/DataTable/DataTableInterfaces.ts

@@ -17,6 +17,7 @@ export interface CommonDataTableProps<T> {
   tableClassName?: string;
   tableStyle?: React.CSSProperties;
   rowHighlight?: RowHighlightInterface<T>;
+  enablePredefinedSort?: boolean;
 }
 
 export interface DataTableRoutedProps<T, TFilter, TRouteName> extends CommonDataTableProps<T> {

src/lib/DataTable/DataTableRouted.tsx

@@ -34,14 +34,18 @@ export function DataTableRouted<T, TFilter, TRouteNames>({
   asc = true,
   orderBy,
   rowHighlight,
+  enablePredefinedSort = false,
 }: DataTableRoutedProps<T, TFilter, TRouteNames>) {
   const [queryResult, setQueryResult] = useState<TableQueryResult<T>>(data);
   const [filterState, setFilterState] = useState<FilterPageState>({
     currentPage: 1,
     filter: predefinedFilter ?? {},
     itemsPerPage: predefinedItemsPerPage ?? 25,
   });
-  const [orderState, setOrderState] = useState<OrderOption>({ orderBy: orderBy ?? columns[0].dataField, asc });
+  const [orderState, setOrderState] = useState<OrderOption>({
+    orderBy: orderBy ?? (enablePredefinedSort ? undefined : columns[0].dataField),
+    asc,
+  });
   const filterRefs = useRef<Filters>({});
 
   function loadPage(filter: any, limit?: number, page?: number, orderBy?: string, asc?: boolean) {