Prepping updates

src/components/DataTable/DataTable.tsx

@@ -23,17 +23,6 @@ export function DataTable({
 	globalFilter: string | number;
 	isRefreshing?: boolean;
 }) {
-	const [scrollParent, setScrollParent] = useState<HTMLDivElement | null>(null);
-
-	const virtualizer = useVirtualizer({
-		count: data.length,
-		getScrollElement: () => scrollParent,
-		estimateSize: () => 30,
-		overscan: 5,
-	});
-
-	const virtualItems = virtualizer.getVirtualItems();
-
 	const table = useTable({
 		features,
 		data: data,
@@ -46,6 +35,18 @@ export function DataTable({
 			globalFilter: globalFilter,
 		},
 	});
+
+	const [scrollParent, setScrollParent] = useState<HTMLDivElement | null>(null);
+
+	const virtualizer = useVirtualizer({
+		count: table.getFilteredRowModel().rows.length,
+		getScrollElement: () => scrollParent,
+		estimateSize: () => 30,
+		overscan: 5,
+	});
+
+	const virtualItems = virtualizer.getVirtualItems();
+
 	const { rows } = table.getRowModel();
 
 	return (
@@ -56,8 +57,8 @@ export function DataTable({
 			<Table
 				style={{
 					width: '100%',
-					borderSpacing: '2px 0px',
 					backgroundColor: 'var(--mantine-color-accent-0)',
+					position: 'relative',
 				}}
 			>
 				<Table.Thead
@@ -212,13 +213,14 @@ export function DataTable({
 				<Table.Tfoot
 					style={{
 						transition: 'all 1s ease',
+						position: 'sticky',
+						bottom: -16,
 					}}
 				>
 					<Table.Tr
+						h={'100%'}
 						style={{
 							backgroundColor: 'var(--mantine-color-primary-0)',
-							position: 'sticky',
-							bottom: 0,
 						}}
 					>
 						<Table.Td colSpan={5}>
@@ -240,9 +242,7 @@ export function DataTable({
 								? 'var(--mantine-color-accent-0)'
 								: 'transparent',
 							position: 'absolute',
-							bottom: isRefreshing ? 0 : -40,
-							paddingBottom: 6,
-							paddingTop: 6,
+							bottom: isRefreshing ? 0 : -32,
 							transition: 'all 1.5s ease-in-out',
 							placeContent: 'center',
 							display: 'flex',