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; }