super basic table sorting and stylings

web/pages/_app.tsx

@@ -4,6 +4,7 @@ import '../styles/globals.scss';
 
 // GW: I can't override ant design styles through components using NextJS's built-in CSS modules. So I'll just import styles here for now and figure out enabling SASS modules later.
 import '../styles/home.scss';
+import '../styles/chat.scss';
 
 import { AppProps } from 'next/app';
 import ServerStatusProvider from '../utils/server-status-context';

web/pages/chat.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Table, Typography } from "antd";
+import { Table, Typography, Tooltip, Switch } from "antd";
 import { ColumnsType } from 'antd/es/table';
 import format from 'date-fns/format'
 
@@ -79,12 +79,14 @@ export default function Chat() {
       title: 'Time',
       dataIndex: 'timestamp',
       key: 'timestamp',
+      className: 'timestamp-col',
       defaultSortOrder: 'descend',
       render: (timestamp) => {
         const dateObject = new Date(timestamp);
-        return format(dateObject, 'P pp');
+        return format(dateObject, 'PP pp');
       },
       sorter: (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
+      width: 80,
     },
     {
       title: 'User',
@@ -92,29 +94,50 @@ export default function Chat() {
       key: 'author',
       className: 'name-col',
       filters: nameFilters,
-      onFilter: (value, record) => record.name.indexOf(value) === 0,
+      onFilter: (value, record) => record.author === value,
-      sorter: (a, b) => a.name.toUppercase() - b.name.toUppercase(),
+      sorter: (a, b) => a.author.localeCompare(b.author),
       sortDirections: ['ascend', 'descend'],  
+      ellipsis: true,
+      render: author => (
+        <Tooltip placement="topLeft" title={author}>
+          {author}
+        </Tooltip>
+      ),
+      width: 80,
     },
     {
       title: 'Message',
       dataIndex: 'body',
       key: 'body',
       className: 'message-col',
+      width: 230,
     },
     {
-      title: 'Show/Hide',
+      title: 'Show/ Hide',
       dataIndex: 'visible',
       key: 'visible',
+      filters: [{ text: 'visible', value: true }, { text: 'hidden', value: false }],
+      onFilter: (value, record) => record.visible === value,
+      render: visible => (
+        <Switch
+          size="small"
+          onChange={checked => {
+            console.log(`switch to ${checked}`);
+          }}
+          defaultChecked={visible}
+        />
+      ),
+      width: 60,
     },
   ];
 
   
   return (
-    <div className="chat-message">
+    <div className="chat-messages">
       <Title level={2}>Chat Messages</Title>
       <Table
         size="small"
+        className="messages-table"
         pagination={{ pageSize: 100 }} 
         scroll={{ y: 540 }}
         rowClassName={record => !record.visible ? 'hidden' : ''}

web/pages/components/chart.tsx

@@ -1,7 +1,7 @@
 import { LineChart } from 'react-chartkick'
-import styles from '../../styles/styles.module.scss';
 import 'chart.js';
-import format from 'date-fns/format'
+import format from 'date-fns/format';
+import styles from '../../styles/styles.module.scss';
 
 interface TimedValue {
   time: Date;

web/styles/chat.scss

@@ -0,0 +1,20 @@
+.chat-messages {
+  .ant-table-small .ant-table-selection-column {
+    width: 20px;
+    min-width: 20px;
+  }
+  .ant-table-tbody > tr > td {
+    transition: background 0.15s;
+  }
+  .ant-table-cell {
+    font-size: 12px;
+
+    &.name-col {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}
+.ant-table-filter-dropdown {
+  max-width: 250px;
+}