diff --git a/web/components/client-table.tsx b/web/components/client-table.tsx
index f042da439..b1ae3dd11 100644
--- a/web/components/client-table.tsx
+++ b/web/components/client-table.tsx
@@ -1,6 +1,7 @@
-import { Table } from 'antd';
-import { SortOrder } from 'antd/lib/table/interface';
+import { Input, Table } from 'antd';
+import { FilterDropdownProps, SortOrder } from 'antd/lib/table/interface';
import { ColumnsType } from 'antd/es/table';
+import { SearchOutlined } from '@ant-design/icons';
import { formatDistanceToNow } from 'date-fns';
import { Client } from '../types/chat';
import UserPopover from './user-popover';
@@ -22,7 +23,22 @@ export default function ClientTable({ data }: ClientTableProps) {
);
},
- sorter: (a: any, b: any) => a.user.displayName - b.user.displayName,
+ sorter: (a: any, b: any) => b.user.displayName.localeCompare(a.user.displayName),
+ filterIcon: ,
+ // eslint-disable-next-line react/no-unstable-nested-components
+ filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }: FilterDropdownProps) => (
+
+ {
+ setSelectedKeys(e.target.value ? [e.target.value] : []);
+ confirm({ closeDropdown: false });
+ }}
+ />
+
+ ),
+ onFilter: (value: string, record: Client) => record.user.displayName.includes(value),
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
@@ -42,7 +58,7 @@ export default function ClientTable({ data }: ClientTableProps) {
defaultSortOrder: 'ascend',
render: (time: Date) => formatDistanceToNow(new Date(time)),
sorter: (a: any, b: any) =>
- new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(),
+ new Date(b.connectedAt).getTime() - new Date(a.connectedAt).getTime(),
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss
index 85cb953a6..b358707f6 100644
--- a/web/styles/ant-overrides.scss
+++ b/web/styles/ant-overrides.scss
@@ -308,6 +308,7 @@ textarea.ant-input {
// ANT TABLE
.ant-table-thead > tr > th,
+.ant-table-filter-dropdown,
.ant-table-small .ant-table-thead > tr > th {
transition-duration: var(--ant-transition-duration);
background-color: var(--purple-dark);
@@ -349,7 +350,8 @@ textarea.ant-input {
background-color: var(--textfield-border);
}
}
-.ant-table-thead th.ant-table-column-sort {
+.ant-table-thead th.ant-table-column-sort,
+.ant-dropdown-trigger.active {
background-color: var(--owncast-purple-25);
opacity: 0.75;
}