From 069d90d8cb5f5a9353edaea2a06d04c3c2c244e2 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 14 Nov 2023 14:47:28 +0200
Subject: [PATCH] fix: date should sort asc/desc properly (#5335)

---
 .../component/admin/banners/BannersTable/BannersTable.tsx   | 3 +--
 .../admin/billing/BillingHistory/BillingHistory.tsx         | 4 +---
 frontend/src/component/admin/groups/Group/Group.tsx         | 4 +---
 .../RoleDeleteDialogRootRole/RoleDeleteDialogGroups.tsx     | 3 +--
 .../RoleDeleteDialogServiceAccounts.tsx                     | 4 +---
 .../RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx      | 4 +---
 .../ServiceAccountTokens/ServiceAccountTokens.tsx           | 5 +----
 .../ServiceAccountsTable/ServiceAccountsTable.tsx           | 4 +---
 frontend/src/component/admin/users/UsersList/UsersList.tsx  | 4 +---
 .../src/component/archive/ArchiveTable/ArchiveTable.tsx     | 2 --
 .../ChangeRequestsTabs/ChangeRequestsTabs.tsx               | 3 +--
 .../src/component/common/ApiTokenTable/useApiTokenTable.tsx | 6 ++++--
 .../feature/FeatureToggleList/FeatureToggleListTable.tsx    | 3 +--
 .../loginHistory/LoginHistoryTable/LoginHistoryTable.tsx    | 3 +--
 .../PaginatedProjectFeatureToggles.tsx                      | 3 +--
 .../Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx | 3 +--
 .../Project/ProjectHealth/ReportTable/ReportTable.tsx       | 3 +--
 .../ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx | 4 +---
 .../ProjectAccess/ProjectGroupView/ProjectGroupView.tsx     | 4 +---
 .../Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx   | 5 +----
 20 files changed, 22 insertions(+), 52 deletions(-)

diff --git a/frontend/src/component/admin/banners/BannersTable/BannersTable.tsx b/frontend/src/component/admin/banners/BannersTable/BannersTable.tsx
index ecf6a6c63e..1ae381afdd 100644
--- a/frontend/src/component/admin/banners/BannersTable/BannersTable.tsx
+++ b/frontend/src/component/admin/banners/BannersTable/BannersTable.tsx
@@ -89,7 +89,6 @@ export const BannersTable = () => {
                 Header: 'Created',
                 accessor: 'createdAt',
                 Cell: DateCell,
-                sortType: 'date',
                 width: 120,
                 maxWidth: 120,
             },
@@ -134,7 +133,7 @@ export const BannersTable = () => {
     );
 
     const [initialState] = useState({
-        sortBy: [{ id: 'createdAt' }],
+        sortBy: [{ id: 'createdAt', desc: true }],
     });
 
     const { data, getSearchText } = useSearch(columns, searchValue, banners);
diff --git a/frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx b/frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx
index 8295c6f82b..61228bcc7c 100644
--- a/frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx
+++ b/frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx
@@ -40,14 +40,12 @@ const columns = [
         Header: 'Created date',
         accessor: 'created',
         Cell: DateCell,
-        sortType: 'date',
         disableGlobalFilter: true,
     },
     {
         Header: 'Due date',
         accessor: 'dueDate',
         Cell: DateCell,
-        sortType: 'date',
         disableGlobalFilter: true,
     },
     {
@@ -76,7 +74,7 @@ export const BillingHistory: VFC<IBillingHistoryProps> = ({
 }) => {
     const initialState = useMemo(
         () => ({
-            sortBy: [{ id: 'created' }],
+            sortBy: [{ id: 'created', desc: true }],
         }),
         [],
     );
diff --git a/frontend/src/component/admin/groups/Group/Group.tsx b/frontend/src/component/admin/groups/Group/Group.tsx
index 229f33451d..6b26cf947d 100644
--- a/frontend/src/component/admin/groups/Group/Group.tsx
+++ b/frontend/src/component/admin/groups/Group/Group.tsx
@@ -44,7 +44,7 @@ export type PageQueryType = Partial<
     Record<'sort' | 'order' | 'search', string>
 >;
 
-const defaultSort: SortingRule<string> = { id: 'joinedAt' };
+const defaultSort: SortingRule<string> = { id: 'joinedAt', desc: true };
 
 const { value: storedParams, setValue: setStoredParams } = createLocalStorage(
     'Group:v1',
@@ -91,7 +91,6 @@ export const Group: VFC = () => {
                 Header: 'Joined',
                 accessor: 'joinedAt',
                 Cell: DateCell,
-                sortType: 'date',
                 maxWidth: 150,
             },
             {
@@ -112,7 +111,6 @@ export const Group: VFC = () => {
                         title={(date) => `Last login: ${date}`}
                     />
                 ),
-                sortType: 'date',
                 maxWidth: 150,
             },
             {
diff --git a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogGroups.tsx b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogGroups.tsx
index 2322c1b303..1489d6e485 100644
--- a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogGroups.tsx
+++ b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogGroups.tsx
@@ -19,7 +19,7 @@ export const RoleDeleteDialogGroups = ({
     groups,
 }: IRoleDeleteDialogGroupsProps) => {
     const [initialState] = useState(() => ({
-        sortBy: [{ id: 'createdAt' }],
+        sortBy: [{ id: 'createdAt', desc: true }],
     }));
 
     const columns = useMemo(
@@ -41,7 +41,6 @@ export const RoleDeleteDialogGroups = ({
                     Header: 'Created',
                     accessor: 'createdAt',
                     Cell: DateCell,
-                    sortType: 'date',
                     width: 120,
                     maxWidth: 120,
                 },
diff --git a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogServiceAccounts.tsx b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogServiceAccounts.tsx
index 843ec14df8..32b9f02f93 100644
--- a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogServiceAccounts.tsx
+++ b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogServiceAccounts.tsx
@@ -20,7 +20,7 @@ export const RoleDeleteDialogServiceAccounts = ({
     serviceAccounts,
 }: IRoleDeleteDialogServiceAccountsProps) => {
     const [initialState] = useState(() => ({
-        sortBy: [{ id: 'seenAt' }],
+        sortBy: [{ id: 'seenAt', desc: true }],
     }));
 
     const columns = useMemo(
@@ -63,7 +63,6 @@ export const RoleDeleteDialogServiceAccounts = ({
                     Header: 'Created',
                     accessor: 'createdAt',
                     Cell: DateCell,
-                    sortType: 'date',
                     width: 120,
                     maxWidth: 120,
                 },
@@ -77,7 +76,6 @@ export const RoleDeleteDialogServiceAccounts = ({
                             return bSeenAt?.getTime() - aSeenAt?.getTime();
                         })[0]?.seenAt,
                     Cell: TimeAgoCell,
-                    sortType: 'date',
                     maxWidth: 150,
                 },
             ] as Column<IServiceAccount>[],
diff --git a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx
index 66fd5d1f35..93f25edd82 100644
--- a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx
+++ b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx
@@ -19,7 +19,7 @@ export const RoleDeleteDialogUsers = ({
     users,
 }: IRoleDeleteDialogUsersProps) => {
     const [initialState] = useState(() => ({
-        sortBy: [{ id: 'last-login' }],
+        sortBy: [{ id: 'last-login', desc: true }],
     }));
 
     const columns = useMemo(
@@ -41,7 +41,6 @@ export const RoleDeleteDialogUsers = ({
                     Header: 'Created',
                     accessor: 'createdAt',
                     Cell: DateCell,
-                    sortType: 'date',
                     width: 120,
                     maxWidth: 120,
                 },
@@ -56,7 +55,6 @@ export const RoleDeleteDialogUsers = ({
                             title={(date) => `Last login: ${date}`}
                         />
                     ),
-                    sortType: 'date',
                     maxWidth: 150,
                 },
             ] as Column<IUser>[],
diff --git a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx
index 0056d53acb..d488f1c880 100644
--- a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx
+++ b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx
@@ -81,7 +81,7 @@ export type PageQueryType = Partial<
     Record<'sort' | 'order' | 'search', string>
 >;
 
-const defaultSort: SortingRule<string> = { id: 'createdAt' };
+const defaultSort: SortingRule<string> = { id: 'createdAt', desc: true };
 
 interface IServiceAccountTokensProps {
     serviceAccount: IServiceAccount;
@@ -179,21 +179,18 @@ export const ServiceAccountTokens = ({
                         }
                         return <DateCell value={value} />;
                     },
-                    sortType: 'date',
                     maxWidth: 150,
                 },
                 {
                     Header: 'Created',
                     accessor: 'createdAt',
                     Cell: DateCell,
-                    sortType: 'date',
                     maxWidth: 150,
                 },
                 {
                     Header: 'Last seen',
                     accessor: 'seenAt',
                     Cell: TimeAgoCell,
-                    sortType: 'date',
                     maxWidth: 150,
                 },
                 {
diff --git a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx
index 8adf206b8b..80480d4d91 100644
--- a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx
+++ b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx
@@ -131,7 +131,6 @@ export const ServiceAccountsTable = () => {
                 Header: 'Created',
                 accessor: 'createdAt',
                 Cell: DateCell,
-                sortType: 'date',
                 width: 120,
                 maxWidth: 120,
             },
@@ -145,7 +144,6 @@ export const ServiceAccountsTable = () => {
                         return bSeenAt?.getTime() - aSeenAt?.getTime();
                     })[0]?.seenAt,
                 Cell: TimeAgoCell,
-                sortType: 'date',
                 maxWidth: 150,
             },
             {
@@ -178,7 +176,7 @@ export const ServiceAccountsTable = () => {
     );
 
     const [initialState] = useState({
-        sortBy: [{ id: 'createdAt' }],
+        sortBy: [{ id: 'createdAt', desc: true }],
         hiddenColumns: ['username'],
     });
 
diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx
index f9bc5f19f3..12ddfaa2a4 100644
--- a/frontend/src/component/admin/users/UsersList/UsersList.tsx
+++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx
@@ -144,7 +144,6 @@ const UsersList = () => {
                 Header: 'Created',
                 accessor: 'createdAt',
                 Cell: DateCell,
-                sortType: 'date',
                 width: 120,
                 maxWidth: 120,
             },
@@ -159,7 +158,6 @@ const UsersList = () => {
                         title={(date) => `Last login: ${date}`}
                     />
                 ),
-                sortType: 'date',
                 maxWidth: 150,
             },
             {
@@ -206,7 +204,7 @@ const UsersList = () => {
 
     const initialState = useMemo(() => {
         return {
-            sortBy: [{ id: 'createdAt' }],
+            sortBy: [{ id: 'createdAt', desc: true }],
             hiddenColumns: isBillingUsers
                 ? ['username', 'email']
                 : ['type', 'username', 'email'],
diff --git a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
index f3a87fa158..0669f01d5e 100644
--- a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
@@ -146,14 +146,12 @@ export const ArchiveTable = ({
                 accessor: 'createdAt',
                 width: 150,
                 Cell: DateCell,
-                sortType: 'date',
             },
             {
                 Header: 'Archived',
                 accessor: 'archivedAt',
                 width: 150,
                 Cell: FeatureArchivedCell,
-                sortType: 'date',
             },
             ...(!projectId
                 ? [
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
index 24eb47df5f..e557ee8d85 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
+++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
@@ -38,7 +38,7 @@ export interface IChangeRequestTableProps {
 
 const defaultSort: SortingRule<string> & {
     columns?: string[];
-} = { id: 'createdAt' };
+} = { id: 'createdAt', desc: true };
 
 const StyledTabContainer = styled('div')({
     paddingLeft: 0,
@@ -162,7 +162,6 @@ export const ChangeRequestsTabs = ({
                 accessor: 'createdAt',
                 maxWidth: 100,
                 Cell: TimeAgoCell,
-                sortType: 'date',
             },
             {
                 Header: 'Environment',
diff --git a/frontend/src/component/common/ApiTokenTable/useApiTokenTable.tsx b/frontend/src/component/common/ApiTokenTable/useApiTokenTable.tsx
index cf9e3becce..27e51e9fb0 100644
--- a/frontend/src/component/common/ApiTokenTable/useApiTokenTable.tsx
+++ b/frontend/src/component/common/ApiTokenTable/useApiTokenTable.tsx
@@ -13,7 +13,10 @@ export const useApiTokenTable = (
     tokens: IApiToken[],
     getActionCell: (props: any) => JSX.Element,
 ) => {
-    const initialState = useMemo(() => ({ sortBy: [{ id: 'createdAt' }] }), []);
+    const initialState = useMemo(
+        () => ({ sortBy: [{ id: 'createdAt', desc: true }] }),
+        [],
+    );
 
     const COLUMNS = useMemo(() => {
         return [
@@ -72,7 +75,6 @@ export const useApiTokenTable = (
                 Header: 'Last seen',
                 accessor: 'seenAt',
                 Cell: TimeAgoCell,
-                sortType: 'date',
                 minWidth: 150,
                 disableGlobalFilter: true,
             },
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index cacf524a9f..ed3a837395 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -52,7 +52,7 @@ export type PageQueryType = Partial<
     Record<'sort' | 'order' | 'search' | 'favorites', string>
 >;
 
-const defaultSort: SortingRule<string> = { id: 'createdAt' };
+const defaultSort: SortingRule<string> = { id: 'createdAt', desc: true };
 
 const { value: storedParams, setValue: setStoredParams } = createLocalStorage(
     'FeatureToggleListTable:v1',
@@ -177,7 +177,6 @@ export const FeatureToggleListTable: VFC = () => {
                 Header: 'Created',
                 accessor: 'createdAt',
                 Cell: DateCell,
-                sortType: 'date',
                 maxWidth: 150,
             },
             {
diff --git a/frontend/src/component/loginHistory/LoginHistoryTable/LoginHistoryTable.tsx b/frontend/src/component/loginHistory/LoginHistoryTable/LoginHistoryTable.tsx
index 152c236ed2..764287b9d1 100644
--- a/frontend/src/component/loginHistory/LoginHistoryTable/LoginHistoryTable.tsx
+++ b/frontend/src/component/loginHistory/LoginHistoryTable/LoginHistoryTable.tsx
@@ -27,7 +27,7 @@ export type PageQueryType = Partial<
     Record<'sort' | 'order' | 'search', string>
 >;
 
-const defaultSort: SortingRule<string> = { id: 'created_at' };
+const defaultSort: SortingRule<string> = { id: 'created_at', desc: true };
 
 const { value: storedParams, setValue: setStoredParams } = createLocalStorage(
     'LoginHistoryTable:v1',
@@ -72,7 +72,6 @@ export const LoginHistoryTable = () => {
                 Cell: ({ value }: { value: Date }) => (
                     <TimeAgoCell value={value} dateFormat={formatDateYMDHMS} />
                 ),
-                sortType: 'date',
                 maxWidth: 150,
             },
             {
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
index 3580b2e08c..9607d0b3a8 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
@@ -84,7 +84,7 @@ const staticColumns = ['Select', 'Actions', 'name', 'favorite'];
 
 const defaultSort: SortingRule<string> & {
     columns?: string[];
-} = { id: 'createdAt' };
+} = { id: 'createdAt', desc: true };
 
 export const PaginatedProjectFeatureToggles = ({
     features,
@@ -266,7 +266,6 @@ export const PaginatedProjectFeatureToggles = ({
                 Header: 'Created',
                 accessor: 'createdAt',
                 Cell: DateCell,
-                sortType: 'date',
                 minWidth: 120,
             },
             ...environments.map((value: ProjectEnvironmentType | string) => {
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index 40af92416d..9bd2fbcf3f 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -79,7 +79,7 @@ const staticColumns = ['Select', 'Actions', 'name', 'favorite'];
 
 const defaultSort: SortingRule<string> & {
     columns?: string[];
-} = { id: 'createdAt' };
+} = { id: 'createdAt', desc: true };
 
 /**
  * @deprecated remove when flag `featureSearchFrontend` is removed
@@ -259,7 +259,6 @@ export const ProjectFeatureToggles = ({
                 Header: 'Created',
                 accessor: 'createdAt',
                 Cell: DateCell,
-                sortType: 'date',
                 minWidth: 120,
             },
             ...environments.map((value: ProjectEnvironmentType | string) => {
diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx
index bd5572a272..523ca1102b 100644
--- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx
+++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx
@@ -78,7 +78,7 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
     const initialState = useMemo(
         () => ({
             hiddenColumns: [],
-            sortBy: [{ id: 'createdAt' }],
+            sortBy: [{ id: 'createdAt', desc: true }],
         }),
         [],
     );
@@ -116,7 +116,6 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
             {
                 Header: 'Created',
                 accessor: 'createdAt',
-                sortType: 'date',
                 Cell: DateCell,
                 disableGlobalFilter: true,
                 maxWidth: 150,
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
index e30e6d1d18..4374a8dd58 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
@@ -54,7 +54,7 @@ export type PageQueryType = Partial<
     Record<'sort' | 'order' | 'search', string>
 >;
 
-const defaultSort: SortingRule<string> = { id: 'added' };
+const defaultSort: SortingRule<string> = { id: 'added', desc: true };
 
 const { value: storedParams, setValue: setStoredParams } = createLocalStorage(
     'ProjectAccess:v1',
@@ -176,7 +176,6 @@ export const ProjectAccessTable: VFC = () => {
                 Cell: ({ value }: { value: Date }) => (
                     <TimeAgoCell value={value} emptyText='Never' />
                 ),
-                sortType: 'date',
                 maxWidth: 130,
             },
             {
@@ -196,7 +195,6 @@ export const ProjectAccessTable: VFC = () => {
                 Cell: ({ value }: { value: Date }) => (
                     <TimeAgoCell value={value} emptyText='Never' />
                 ),
-                sortType: 'date',
                 maxWidth: 130,
             },
             {
diff --git a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx
index 0e83a40201..42c154b0fb 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx
@@ -48,7 +48,7 @@ const StyledTitle = styled('div')(({ theme }) => ({
     },
 }));
 
-const defaultSort: SortingRule<string> = { id: 'joinedAt' };
+const defaultSort: SortingRule<string> = { id: 'joinedAt', desc: true };
 
 const columns = [
     {
@@ -77,7 +77,6 @@ const columns = [
         Header: 'Joined',
         accessor: 'joinedAt',
         Cell: DateCell,
-        sortType: 'date',
         maxWidth: 150,
     },
     {
@@ -91,7 +90,6 @@ const columns = [
                 title={(date) => `Last login: ${date}`}
             />
         ),
-        sortType: 'date',
         maxWidth: 150,
     },
     // Always hidden -- for search
diff --git a/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx b/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx
index 45bd596d16..b58a00c284 100644
--- a/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx
+++ b/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx
@@ -75,7 +75,7 @@ export type PageQueryType = Partial<
     Record<'sort' | 'order' | 'search', string>
 >;
 
-const defaultSort: SortingRule<string> = { id: 'createdAt' };
+const defaultSort: SortingRule<string> = { id: 'createdAt', desc: true };
 
 const { value: storedParams, setValue: setStoredParams } = createLocalStorage(
     'PersonalAPITokensTable:v1',
@@ -132,21 +132,18 @@ export const PersonalAPITokensTab = () => {
                         }
                         return <DateCell value={value} />;
                     },
-                    sortType: 'date',
                     maxWidth: 150,
                 },
                 {
                     Header: 'Created',
                     accessor: 'createdAt',
                     Cell: DateCell,
-                    sortType: 'date',
                     maxWidth: 150,
                 },
                 {
                     Header: 'Last seen',
                     accessor: 'seenAt',
                     Cell: TimeAgoCell,
-                    sortType: 'date',
                     maxWidth: 150,
                 },
                 {