Table fixes

src/components/Columns/SearchHistoryColumns.tsx

@@ -45,8 +45,11 @@ export const SearchHistoryColumns = (
 				</Box>
 			</Group>
 		),
-		size: 64,
-		maxSize: 64,
+		meta: {
+			filterVariant: 'counter',
+		},
+		size: 32,
+		maxSize: 32,
 		enableSorting: false,
 	}),
 	columnHelper.accessor('prefix', {
@@ -64,26 +67,43 @@ export const SearchHistoryColumns = (
 			if (value === null) return true;
 			return row.getValue(id) === value;
 		},
+		size: 32,
+		maxSize: 32,
 	}),
 	columnHelper.accessor('provider', {
 		id: 'provider',
-		cell: ({ cell }: any) => <Text mx={8}>{cell.getValue()}</Text>,
+		cell: ({ cell }: any) => (
+			<Text mx={8} style={{ textAlign: 'center' }}>
+				{cell.getValue()}
+			</Text>
+		),
 		header: () => <Text fw={600}>Provider</Text>,
 		meta: {
 			filterVariant: 'mantineSelect',
 		},
+		size: 128,
+		maxSize: 128,
 	}),
 	columnHelper.accessor('searchTerm', {
 		id: 'searchTerm',
 		cell: ({ cell }: any) => (
-			<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
-				{cell.getValue()}
-			</Text>
+			<Group
+				style={{
+					overflow: 'hidden',
+					whiteSpace: 'nowrap',
+					textOverflow: 'ellipsis',
+				}}
+			>
+				<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
+					{cell.getValue()}
+				</Text>
+			</Group>
 		),
 		header: () => <Text fw={600}>Search String</Text>,
 		meta: {
 			filterVariant: 'text',
 		},
+		maxSize: 1920,
 	}),
 	columnHelper.accessor('dateTimeStamp', {
 		id: 'dateTimeStamp',
@@ -115,5 +135,7 @@ export const SearchHistoryColumns = (
 			}
 			return true;
 		},
+		size: 132,
+		maxSize: 132,
 	}),
 ];

src/components/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import { Button, Group } from '@mantine/core';
+import { Button, Group, Text } from '@mantine/core';
 import {
 	type ColumnFiltersState,
 	flexRender,
@@ -10,7 +10,7 @@ import {
 	type SortingState,
 	useReactTable,
 } from '@tanstack/react-table';
-import { type Dispatch, type SetStateAction, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import { Filter } from './components';
 
 export function DataTable({
@@ -55,32 +55,47 @@ export function DataTable({
 		globalFilterFn: 'includesString',
 		onGlobalFilterChange: setGlobalFilter,
 	});
+
+	useEffect(() => {
+		if (!filtersEnabled) {
+			setColumnFilters([]);
+		}
+	}, [filtersEnabled]);
 	return (
-		<table style={{ width: '100%', backgroundColor: 'var(--mantine-color-primary-0)' }}>
+		<table
+			style={{
+				borderSpacing: '2px 0px',
+				backgroundColor: 'var(--mantine-color-accent-0)',
+			}}
+		>
 			<thead
 				style={{
 					position: 'sticky',
 					top: 0,
 					zIndex: 1,
 					backgroundColor: 'var(--mantine-color-primary-0)',
-					borderTopLeftRadius: '1rem',
-					borderTopRightRadius: '1rem',
 				}}
 			>
 				{table.getHeaderGroups().map((headerGroup) => (
 					<tr key={headerGroup.id}>
 						{headerGroup.headers.map((header) => (
-							<th key={header.id}>
+							<th
+								key={header.id}
+								style={{
+									width: header.getSize(),
+									padding: 0,
+								}}
+							>
 								{header.isPlaceholder ? null : (
 									<>
 										<Button
 											{...{
 												style: {
 													cursor: 'pointer',
-													width: '100%',
 													borderRadius: '0px',
 													backgroundColor: 'transparent',
 												},
+												px: 0,
 												onClick: () => {
 													if (header.column.getCanSort()) {
 														if (sorting[0].id === header.id) {
@@ -114,6 +129,7 @@ export function DataTable({
 											<Filter
 												column={header.column}
 												options={[...new Set(data.map((item: any) => item[header.id]))]}
+												resultCount={table.getFilteredRowModel().rows.length}
 											/>
 										) : null}
 									</>
@@ -139,7 +155,12 @@ export function DataTable({
 						}}
 					>
 						{row.getVisibleCells().map((cell) => (
-							<td key={cell.id}>
+							<td
+								key={cell.id}
+								style={{
+									width: cell.column.getSize(),
+								}}
+							>
 								{flexRender(cell.column.columnDef.cell, cell.getContext())}
 							</td>
 						))}
@@ -158,6 +179,26 @@ export function DataTable({
 						))}
 					</tr>
 				))}
+				<tr
+					style={{
+						width: '100%',
+						backgroundColor: 'var(--mantine-color-primary-0)',
+						position: 'sticky',
+						bottom: 0,
+					}}
+				>
+					<td colSpan={5}>
+						<Text
+							style={{
+								color: 'var(--mantine-color-background-0)',
+								fontWeight: 'bold',
+								textAlign: 'center',
+							}}
+						>
+							Total Entries: {table.getRowCount()}
+						</Text>
+					</td>
+				</tr>
 			</tfoot>
 		</table>
 	);

src/components/DataTable/components/Filter.tsx

@@ -8,6 +8,7 @@ import {
 	RangeSlider,
 	Select,
 	Stack,
+	Text,
 } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
 import type { Column, RowData } from '@tanstack/react-table';
@@ -26,11 +27,20 @@ declare module '@tanstack/react-table' {
 			| 'multiSelect'
 			| 'slider'
 			| 'checkbox'
+			| 'counter'
 			| 'none';
 	}
 }
 
-export function Filter({ column, options }: { column: Column<unknown>; options: any }) {
+export function Filter({
+	column,
+	options,
+	resultCount,
+}: {
+	column: Column<unknown>;
+	options: any;
+	resultCount?: number;
+}) {
 	const columnFilterValue = column.getFilterValue();
 	const { filterVariant } = column.columnDef.meta ?? {};
 	const optionsFilter: OptionsFilter = ({ options, search }) => {
@@ -88,12 +98,15 @@ export function Filter({ column, options }: { column: Column<unknown>; options:
 				label: selectClasses.menuSelectLabel,
 				options: selectClasses.menuSelectOptions,
 				option: selectClasses.menuSelectOption,
-				dropdown: selectClasses.dropdown,
 			}}
-			data={options.map((option: ComboboxItem) => {
-				return { value: option, label: option };
-			})}
+			data={options
+				.map((option: ComboboxItem) => {
+					return { value: option, label: option };
+				})
+				.sort((a: ComboboxItem, b: ComboboxItem) => a.label.localeCompare(b.label))}
 			onChange={(e: any) => column.setFilterValue(e)}
+			w={'auto'}
+			clearable
 		/>
 	) : filterVariant === 'multiSelect' ? (
 		<MultiSelect
@@ -149,6 +162,13 @@ export function Filter({ column, options }: { column: Column<unknown>; options:
 			<Checkbox onChange={(value) => column.setFilterValue(value.target.checked)} />
 		</Group>
 		// See faceted column filters example for datalist search suggestions
+	) : filterVariant === 'counter' ? (
+		<Group h={36} align='center' justify='center'>
+			<Text c={'var(--mantine-color-background-0)'}>
+				{resultCount}/{options.length}
+			</Text>
+		</Group>
+		// See faceted column filters example for datalist search suggestions
 	) : (
 		<Box
 			style={{