fix: sort order across the app

discussed with Nicolae and Nuno

frontend/src/component/Reporting/ReportTable/ReportTable.tsx

@@ -55,7 +55,7 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
     const initialState = useMemo(
         () => ({
             hiddenColumns: [],
-            sortBy: [{ id: 'createdAt', desc: true }],
+            sortBy: [{ id: 'createdAt' }],
         }),
         []
     );

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -119,6 +119,7 @@ const UsersList = () => {
                 Cell: DateCell,
                 disableGlobalFilter: true,
                 sortType: 'date',
+                minWidth: 120,
             },
             {
                 Header: 'Avatar',
@@ -169,6 +170,7 @@ const UsersList = () => {
                 ),
                 disableGlobalFilter: true,
                 sortType: 'date',
+                minWidth: 150,
             },
             {
                 Header: 'Actions',
@@ -193,7 +195,7 @@ const UsersList = () => {
 
     const initialState = useMemo(() => {
         return {
-            sortBy: [{ id: 'createdAt', desc: false }],
+            sortBy: [{ id: 'createdAt' }],
             hiddenColumns: isBillingUsers ? [] : ['type'],
         };
     }, [isBillingUsers]);

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -99,7 +99,7 @@ const columns = [
     },
 ];
 
-const defaultSort: SortingRule<string> = { id: 'createdAt', desc: true };
+const defaultSort: SortingRule<string> = { id: 'createdAt' };
 
 const { value: storedParams, setValue: setStoredParams } = createLocalStorage(
     'FeatureToggleListTable:v1',

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx

@@ -20,10 +20,7 @@ export const FeatureMetricsTable = ({
 }: IFeatureMetricsTableProps) => {
     const isMediumScreen = useMediaQuery(theme.breakpoints.down('md'));
 
-    const initialState = useMemo(
+    const initialState = useMemo(() => ({ sortBy: [{ id: 'timestamp' }] }), []);
-        () => ({ sortBy: [{ id: 'timestamp', desc: true }] }),
-        []
-    );
 
     const {
         getTableProps,

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -67,10 +67,7 @@ const staticColumns = ['Actions', 'name'];
 
 const defaultSort: SortingRule<string> & {
     columns?: string[];
-} = {
+} = { id: 'createdAt' };
-    id: 'createdAt',
-    desc: true,
-};
 
 export const ProjectFeatureToggles = ({
     features,

frontend/src/component/segments/SegmentTable/SegmentTable.tsx

@@ -30,7 +30,7 @@ export const SegmentTable = () => {
     const { segments, loading } = useSegments();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const [initialState] = useState({
-        sortBy: [{ id: 'createdAt', desc: false }],
+        sortBy: [{ id: 'createdAt' }],
         hiddenColumns: ['description'],
     });
 

frontend/src/utils/sortTypes.ts

@@ -7,7 +7,7 @@ export const sortTypes = {
     date: (v1: any, v2: any, id: string) => {
         const a = new Date(v1?.values?.[id] || 0);
         const b = new Date(v2?.values?.[id] || 0);
-        return a?.getTime() - b?.getTime();
+        return b?.getTime() - a?.getTime(); // newest first by default
     },
     boolean: (v1: any, v2: any, id: string) => {
         const a = v1?.values?.[id];