Package updates and DataTable migration

src/components/Columns/SearchHistoryColumns.tsx

@@ -1,9 +1,20 @@
 import { ActionIcon, Box, Group, Text } from '@mantine/core';
-import { createColumnHelper } from '@tanstack/react-table';
+import {
+	columnFilteringFeature,
+	createColumnHelper,
+	filterFn_includesString,
+	rowSortingFeature,
+	tableFeatures,
+} from '@tanstack/react-table';
 import { FaFilter, FaTrash } from 'react-icons/fa';
 import type { SearchHistoryItem } from 'types';
 
-const columnHelper = createColumnHelper<SearchHistoryItem>();
+const features = tableFeatures({
+	rowSortingFeature,
+	columnFilteringFeature,
+	filterFns: { includesString: filterFn_includesString },
+});
+const columnHelper = createColumnHelper<typeof features, SearchHistoryItem>();
 export const SearchHistoryColumns = (
 	setSelectedItem: React.Dispatch<React.SetStateAction<SearchHistoryItem | undefined>>,
 	deleteItemOpen: () => void,
@@ -26,7 +37,7 @@ export const SearchHistoryColumns = (
 			</Group>
 		),
 		header: () => (
-			<Group gap={0} justify='center'>
+			<Group gap={0} justify='center' align='center'>
 				<Box
 					w={'1.75rem'}
 					h={'1.75rem'}
@@ -48,9 +59,8 @@ export const SearchHistoryColumns = (
 		),
 		meta: {
 			filterVariant: 'counter',
+			width: '32px',
 		},
-		size: 32,
-		maxSize: 32,
 		enableSorting: false,
 	}),
 	columnHelper.accessor('prefix', {
@@ -63,27 +73,28 @@ export const SearchHistoryColumns = (
 		header: () => <Text fw={600}>Prefix</Text>,
 		meta: {
 			filterVariant: 'mantineSelect',
+			width: '72px',
 		},
 		filterFn: (row, id, value) => {
 			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} style={{ textAlign: 'center' }}>
+			<Text
+				mx={8}
+				style={{ textAlign: 'center', overflow: 'ellipsis', whiteSpace: 'nowrap' }}
+			>
 				{cell.getValue()}
 			</Text>
 		),
 		header: () => <Text fw={600}>Provider</Text>,
 		meta: {
 			filterVariant: 'mantineSelect',
+			width: '128px',
 		},
-		size: 128,
-		maxSize: 128,
 	}),
 	columnHelper.accessor('searchTerm', {
 		id: 'searchTerm',
@@ -93,9 +104,18 @@ export const SearchHistoryColumns = (
 					overflow: 'hidden',
 					whiteSpace: 'nowrap',
 					textOverflow: 'ellipsis',
+					display: 'block',
 				}}
 			>
-				<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
+				<Text
+					mx={8}
+					style={{
+						justifySelf: 'center',
+						overflow: 'hidden',
+						whiteSpace: 'nowrap',
+						textOverflow: 'ellipsis',
+					}}
+				>
 					{cell.getValue()}
 				</Text>
 			</Group>
@@ -103,8 +123,9 @@ export const SearchHistoryColumns = (
 		header: () => <Text fw={600}>Search String</Text>,
 		meta: {
 			filterVariant: 'text',
+			width: 'calc(100% - 375px)',
 		},
-		maxSize: 1920,
+		filterFn: 'includesString',
 	}),
 	columnHelper.accessor('dateTimeStamp', {
 		id: 'dateTimeStamp',
@@ -126,6 +147,7 @@ export const SearchHistoryColumns = (
 		header: () => <Text fw={600}>Time Stamp</Text>,
 		meta: {
 			filterVariant: 'range',
+			width: '148px',
 		},
 		filterFn: (row, id, value) => {
 			const startDate = new Date(value[0]);
@@ -136,8 +158,5 @@ export const SearchHistoryColumns = (
 			}
 			return true;
 		},
-		size: 132,
-		maxSize: 132,
-		minSize: 132,
 	}),
 ];