disable row checkboxes, tweak virtualization

weareinreach · Feb 7, 2024 · afe1199 · afe1199
1 parent 0bab4df
commit afe1199
Showing 1 changed file with 44 additions and 16 deletions.
diff --git a/packages/ui/components/data-portal/OrganizationTable.tsx b/packages/ui/components/data-portal/OrganizationTable.tsx
@@ -1,4 +1,5 @@
 import { ActionIcon, createStyles, Group, rem, Text, Tooltip, useMantineTheme } from '@mantine/core'
+// import { ReactTableDevtools } from '@tanstack/react-table-devtools'
 import { DateTime } from 'luxon'
 import {
 	MantineReactTable,
@@ -12,7 +13,7 @@ import {
 	useMantineReactTable,
 } from 'mantine-react-table'
 import { type Route } from 'nextjs-routes'
-import { type Dispatch, type SetStateAction, useMemo, useRef, useState } from 'react'
+import { type Dispatch, type SetStateAction, useEffect, useMemo, useRef, useState } from 'react'
 
 import { type ApiOutput } from '@weareinreach/api'
 import { Link } from '~ui/components/core/Link'
@@ -29,6 +30,11 @@ const useStyles = createStyles((theme) => ({
 	bottomBar: {
 		paddingTop: rem(20),
 	},
+	devTool: {
+		'& *': {
+			backgroundColor: '#132337',
+		},
+	},
 }))
 
 const getAlertBanner = ({
@@ -188,7 +194,6 @@ const RowAction = ({ row }: RowActionProps) => {
 export const OrganizationTable = () => {
 	const { classes } = useStyles()
 	const { data, isLoading, isError, isFetching } = api.organization.forOrganizationTable.useQuery(undefined, {
-		placeholderData: [],
 		select: (data) => data.map(({ locations, ...rest }) => ({ ...rest, subRows: locations })),
 		refetchOnWindowFocus: false,
 	})
@@ -239,6 +244,7 @@ export const OrganizationTable = () => {
 				filterVariant: 'date-range',
 				enableColumnFilterModes: false,
 				size: 150,
+				sortingFn: 'datetime',
 			},
 			{
 				accessorKey: 'updatedAt',
@@ -313,9 +319,17 @@ export const OrganizationTable = () => {
 	const [sorting, setSorting] = useState<MRT_SortingState>([
 		{ id: 'deleted', desc: false },
 		{ id: 'published', desc: true },
-		{ id: 'name', desc: false },
+		// { id: 'name', desc: false },
 	])
 	const rowVirtualizerInstanceRef = useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null)
+	useEffect(() => {
+		try {
+			//scroll to the top of the table when the sorting changes
+			rowVirtualizerInstanceRef.current?.scrollToIndex(0)
+		} catch (e) {
+			console.error(e)
+		}
+	}, [sorting])
 	// #endregion
 
 	// #region Table Setup
@@ -325,28 +339,37 @@ export const OrganizationTable = () => {
 		data: data ?? [],
 		// #endregion
 		// #region Enable features / Table options
-		columnFilterDisplayMode: 'popover',
-		enableColumnFilterModes: true,
-		enableGlobalFilterModes: true,
+
 		enableColumnResizing: false,
 		enableFacetedValues: true,
-		enablePagination: false,
 		enablePinning: true,
 		enableRowActions: true,
 		enableRowNumbers: false,
-		enableRowVirtualization: true,
 		enableExpanding: true,
-		enableMultiRowSelection: true,
-		enableRowSelection: (row) => !row.getParentRow(),
+		// enableMultiRowSelection: true,
+		// enableRowSelection: (row) => !row.getParentRow(),
+		enableMultiRowSelection: false,
+		enableRowSelection: false,
 		enableHiding: true,
-		getRowId: (originalRow) => originalRow.id,
-		isMultiSortEvent: () => true,
-		maxLeafRowFilterDepth: 0,
+		// getRowId: (originalRow) => originalRow.id,
 		positionGlobalFilter: 'left',
 		rowCount: data?.length ?? 0,
+		// #endregion
+		// #region Filtering/Sorting
+		columnFilterDisplayMode: 'popover',
+		enableColumnFilterModes: true,
+		enableGlobalFilterModes: true,
+		isMultiSortEvent: () => true,
+		maxLeafRowFilterDepth: 0,
+		// #endregion
+
+		// #region Virtualization
+		enablePagination: false,
+		enableRowVirtualization: true,
 		rowVirtualizerInstanceRef,
-		rowVirtualizerProps: { overscan: 10, estimateSize: () => 56 },
+		// rowVirtualizerProps: { overscan: 25, debug: true, estimateSize: () => 45 },
 		// #endregion
+
 		// #region State
 		initialState: {
 			columnPinning: { left: ['mrt-row-expand', 'mrt-row-select', 'mrt-row-actions', 'name'] },
@@ -372,7 +395,7 @@ export const OrganizationTable = () => {
 		mantinePaperProps: { miw: '85%' },
 		mantineProgressProps: ({ isTopToolbar }) => ({ style: { display: isTopToolbar ? 'block' : 'none' } }),
 		mantineSelectCheckboxProps: ({ row }) => ({ style: { display: row.getCanSelect() ? 'block' : 'none' } }),
-		mantineTableBodyProps: { mah: '60vh' },
+		mantineTableContainerProps: { mah: '60vh' },
 		mantineTableBodyCellProps: ({ row }) => ({
 			sx: (theme) => ({
 				textDecoration: row.original.deleted ? 'line-through' : 'none',
@@ -398,7 +421,12 @@ export const OrganizationTable = () => {
 	})
 	// #endregion
 
-	return <MantineReactTable table={table} />
+	return (
+		<>
+			<MantineReactTable table={table} />
+			{/* <ReactTableDevtools table={table} panelProps={{ className: classes.devTool }} containerElement='div' /> */}
+		</>
+	)
 }
 
 interface ToolbarButtonsProps {