Resolve TMSS-298

Closes TMSS-298

SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js

@@ -229,7 +229,7 @@ const IndeterminateCheckbox = React.forwardRef(
 )
 
 // Our table component
-function Table({ columns, data, defaultheader, optionalheader }) {
+function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn }) {
   const filterTypes = React.useMemo(
     () => ({
       // Add a new fuzzyTextFilterFn filter type.
@@ -280,7 +280,8 @@ function Table({ columns, data, defaultheader, optionalheader }) {
         data,
         defaultColumn,
         filterTypes,
-        initialState: { pageIndex: 0 }
+        initialState: { pageIndex: 0,
+          sortBy: defaultSortColumn }
       },
       useFilters,
       useGlobalFilter,
@@ -421,7 +422,11 @@ function ViewTable(props) {
     // Default Header to show in table and other columns header will not show until user action on UI
     let defaultheader = props.defaultcolumns;
     let optionalheader = props.optionalcolumns;
-    
+    let defaultSortColumn = props.defaultSortColumn;
+    if(!defaultSortColumn){
+      defaultSortColumn =[{}];
+    }
+
     let columns = [];   
     let defaultdataheader =  Object.keys(defaultheader[0]);
     let optionaldataheader =  Object.keys(optionalheader[0]);
@@ -508,7 +513,8 @@ function ViewTable(props) {
  
   return (
     <div>
-        <Table columns={columns} data={tbldata} defaultheader={defaultheader[0]} optionalheader={optionalheader[0]} />
+        <Table columns={columns} data={tbldata} defaultheader={defaultheader[0]} optionalheader={optionalheader[0]} 
+        defaultSortColumn={defaultSortColumn} />
     </div>
   )
 }