column sizing, lastVerified display

weareinreach · Aug 16, 2023 · 0a9d9c7 · 0a9d9c7
1 parent daf5e93
commit 0a9d9c7
Showing 1 changed file with 24 additions and 9 deletions.
diff --git a/packages/ui/components/data-portal/OrganizationTable.tsx b/packages/ui/components/data-portal/OrganizationTable.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from '@mantine/core'
 import { DateTime } from 'luxon'
 import {
 	MantineReactTable,
@@ -23,28 +24,36 @@ export const OrganizationTable = (props: Props) => {
 				header: 'Name',
 				columnFilterModeOptions: ['contains', 'fuzzy', 'startsWith', 'endsWith'],
 				filterVariant: 'autocomplete',
+				enableResizing: true,
+				minSize: 250,
 			},
 			{
 				accessorKey: 'lastVerified',
-				header: 'Last Verified',
+				header: 'Verified',
 				Cell: ({ cell }) => {
 					const date = DateTime.fromJSDate(cell.getValue<Date>())
-					return <span>{date.toLocaleString(DateTime.DATETIME_SHORT)}</span>
+					return (
+						<Tooltip label={date.toLocaleString(DateTime.DATE_HUGE)} withinPortal>
+							<span>{date.toRelativeCalendar()}</span>
+						</Tooltip>
+					)
 				},
 				columnFilterModeOptions: ['betweenInclusive'],
 				filterVariant: 'date-range',
 				enableColumnFilterModes: false,
+				size: 150,
 			},
 			{
 				accessorKey: 'updatedAt',
-				header: 'Last Updated',
+				header: 'Updated',
 				Cell: ({ cell }) => {
 					const date = DateTime.fromJSDate(cell.getValue<Date>())
 					return <span>{date.toLocaleString(DateTime.DATETIME_SHORT)}</span>
 				},
 				columnFilterModeOptions: ['betweenInclusive'],
 				filterVariant: 'date-range',
 				enableColumnFilterModes: false,
+				size: 150,
 			},
 			{
 				accessorKey: 'createdAt',
@@ -56,6 +65,7 @@ export const OrganizationTable = (props: Props) => {
 				columnFilterModeOptions: ['betweenInclusive'],
 				filterVariant: 'date-range',
 				enableColumnFilterModes: false,
+				size: 150,
 			},
 			{
 				accessorKey: 'published',
@@ -85,7 +95,9 @@ export const OrganizationTable = (props: Props) => {
 		[]
 	)
 
-	const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>([])
+	const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>([
+		{ id: 'deleted', value: false },
+	])
 	const [columnFilterFns, setColumnFilterFns] = //filter modes
 		useState<MRT_ColumnFilterFnsState>(
 			Object.fromEntries(
@@ -111,25 +123,26 @@ export const OrganizationTable = (props: Props) => {
 		placeholderData: [],
 	})
 
-	const getAlertBanner = useMemo(() => {
+	const getAlertBanner = () => {
 		switch (true) {
 			case isError: {
 				return {
 					color: 'red',
 					children: 'Error fetching data',
 				}
 			}
+			case isFetching:
 			case isLoading: {
 				return {
 					color: 'green',
 					children: 'Loading data',
 				}
 			}
 			default: {
-				return undefined
+				return { color: 'white', children: null, sx: { backgroundColor: 'transparent' } }
 			}
 		}
-	}, [isLoading, isError])
+	}
 
 	const table = useMantineReactTable({
 		columns,
@@ -140,16 +153,17 @@ export const OrganizationTable = (props: Props) => {
 		enableFacetedValues: true,
 		enablePagination: false,
 		enablePinning: true,
-		enableRowNumbers: true,
+		enableRowNumbers: false,
 		enableRowVirtualization: true,
 		mantineTableContainerProps: { sx: { maxHeight: '600px' } },
 		columnFilterDisplayMode: 'popover',
 
 		// columnFilterModeOptions: ['contains', 'startsWith', 'endsWith'],
 		initialState: {
 			showColumnFilters: false,
+			columnPinning: { left: ['name'] },
 		},
-		mantineToolbarAlertBannerProps: getAlertBanner,
+		mantineToolbarAlertBannerProps: getAlertBanner(),
 		onColumnFilterFnsChange: setColumnFilterFns,
 		onColumnFiltersChange: setColumnFilters,
 		onGlobalFilterChange: setGlobalFilter,
@@ -170,6 +184,7 @@ export const OrganizationTable = (props: Props) => {
 		mantineTableProps: { striped: true },
 		mantineProgressProps: ({ isTopToolbar }) => ({ style: { display: isTopToolbar ? 'block' : 'none' } }),
 		renderBottomToolbar: ({ table }) => <span>{table.getFilteredRowModel().rows.length} results</span>,
+		isMultiSortEvent: () => true,
 	})
 
 	return <MantineReactTable table={table} />