From 0397c0e1b0ed1a87c7f06a69a8a222e11a9bccea Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Mon, 10 Nov 2025 13:32:31 -0600 Subject: [PATCH] Table updates --- package-lock.json | 69 +++-- package.json | 12 +- src/components/DataTable/DataTable.tsx | 281 ++++++++++-------- .../DataTable/components/Filter.tsx | 19 +- src/components/DebouncedInput.tsx | 12 +- src/styles/DatePickerInput.module.css | 55 ++++ src/styles/index.ts | 2 + 7 files changed, 271 insertions(+), 179 deletions(-) create mode 100644 src/styles/DatePickerInput.module.css diff --git a/package-lock.json b/package-lock.json index c438761..ae7e1b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,11 @@ "dependencies": { "@gfazioli/mantine-text-animate": "^2.3.3", "@hello-pangea/dnd": "^18.0.1", - "@mantine/core": "^8.3.6", - "@mantine/dates": "^8.3.6", - "@mantine/form": "^8.3.6", - "@mantine/hooks": "^8.3.6", - "@mantine/notifications": "^8.3.6", + "@mantine/core": "^8.3.7", + "@mantine/dates": "^8.3.7", + "@mantine/form": "^8.3.7", + "@mantine/hooks": "^8.3.7", + "@mantine/notifications": "^8.3.7", "@tanstack/react-query": "^5.90.7", "@tanstack/react-query-devtools": "^5.90.2", "@tanstack/react-query-persist-client": "^5.90.9", @@ -25,7 +25,7 @@ "react-dom": "^19.2.0", "react-icons": "^5.5.0", "react-router-dom": "^7.9.5", - "recharts": "^3.3.0" + "recharts": "^3.4.1" }, "devDependencies": { "@types/node": "^24.10.0", @@ -898,9 +898,9 @@ } }, "node_modules/@mantine/core": { - "version": "8.3.6", - "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.6.tgz", - "integrity": "sha512-paTl+0x+O/QtgMtqVJaG8maD8sfiOdgPmLOyG485FmeGZ1L3KMdEkhxZtmdGlDFsLXhmMGQ57ducT90bvhXX5A==", + "version": "8.3.7", + "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.7.tgz", + "integrity": "sha512-7gUTiUrD0pukpkSNvScGi/e+pBuBWYJP5yFHT4TFf1fmaQAA7PbNoAzUeEkPbVromDtK0VdEcpRlYpDnJhpz2g==", "license": "MIT", "peer": true, "dependencies": { @@ -912,31 +912,31 @@ "type-fest": "^4.41.0" }, "peerDependencies": { - "@mantine/hooks": "8.3.6", + "@mantine/hooks": "8.3.7", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "node_modules/@mantine/dates": { - "version": "8.3.6", - "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-8.3.6.tgz", - "integrity": "sha512-lSi1zvyL86SKeePH0J3vOjAR7ZIVNOrZm6ja7jAH6IBdcpQOKH8TXbrcAi5okEStvmvkne7pVaGu0VkdE8KnAw==", + "version": "8.3.7", + "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-8.3.7.tgz", + "integrity": "sha512-dyCvkn0aYvvZ8/bUm6EGl9epJ4pq398pzJ/wexzFPHuFdLq/kdIe5zurp/puNcn4CHraglYUflDqj0j8d9aadA==", "license": "MIT", "dependencies": { "clsx": "^2.1.1" }, "peerDependencies": { - "@mantine/core": "8.3.6", - "@mantine/hooks": "8.3.6", + "@mantine/core": "8.3.7", + "@mantine/hooks": "8.3.7", "dayjs": ">=1.0.0", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "node_modules/@mantine/form": { - "version": "8.3.6", - "resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.6.tgz", - "integrity": "sha512-hIu0KdP1e1Vu7KUQ+cIDpor9UE9vO7iXR3dOMu6GPF3MlHFbwnCjakW9nxSCjP1PRTMwA3m43s4GIt22XfK9tg==", + "version": "8.3.7", + "resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.7.tgz", + "integrity": "sha512-LWC1hlVAfgWtrbCNSoGmo+c8IIXAsLSR2KS25QaIfvRVeMeG1I+RheHK/6VmqKEWChpQzjc346gi4LNApbWRZg==", "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.3", @@ -947,9 +947,9 @@ } }, "node_modules/@mantine/hooks": { - "version": "8.3.6", - "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.6.tgz", - "integrity": "sha512-liHfaWXHAkLjJy+Bkr29UsCwAoDQ/a64WrM67lksx8F0qqyjR5RQH8zVlhuOjdpQnwtlUkE/YiTvbJiPcoI0bw==", + "version": "8.3.7", + "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.7.tgz", + "integrity": "sha512-2xnKS8C6fTzMoq1dtOJGrh2bIBuWnVrijL/DsDk60UaUgbABh8zScwU5ndX+p02ds2bebo34LovscP9fH38uPg==", "license": "MIT", "peer": true, "peerDependencies": { @@ -957,25 +957,25 @@ } }, "node_modules/@mantine/notifications": { - "version": "8.3.6", - "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.6.tgz", - "integrity": "sha512-d3A96lyrFOVXtrwASEXALfzooKnnA60T2LclMXFF/4k27Ay5Hwza4D+ylqgxf0RkPfF9J6LhBXk72OjL5RH5Kg==", + "version": "8.3.7", + "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.7.tgz", + "integrity": "sha512-NvG9nVfsdoAGbyFxmb/2cCED91N6QVCUsasdcFhpBb5KNMjQbNjwXLVKgvdAA3Fhnjzcc6SF2CdxgTN625kFRA==", "license": "MIT", "dependencies": { - "@mantine/store": "8.3.6", + "@mantine/store": "8.3.7", "react-transition-group": "4.4.5" }, "peerDependencies": { - "@mantine/core": "8.3.6", - "@mantine/hooks": "8.3.6", + "@mantine/core": "8.3.7", + "@mantine/hooks": "8.3.7", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "node_modules/@mantine/store": { - "version": "8.3.6", - "resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.6.tgz", - "integrity": "sha512-fo86wF6nL8RPukY8cseAFQKk+bRVv3Ga/WmHJMYRsCbNleZOEZMXXUf/OVhmr1D3t+xzCzAlJe/sQ8MIS+c+pA==", + "version": "8.3.7", + "resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.7.tgz", + "integrity": "sha512-YOK+LW7ZVHv1c/bOnStraJbyh7+uRSeo1DG2eH9M+EllXJfNG8bVhOfrnnraYZ1rbbvD/66/hSZkAZJbZeTOAw==", "license": "MIT", "peerDependencies": { "react": "^18.x || ^19.x" @@ -3601,10 +3601,13 @@ } }, "node_modules/recharts": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.3.0.tgz", - "integrity": "sha512-Vi0qmTB0iz1+/Cz9o5B7irVyUjX2ynvEgImbgMt/3sKRREcUM07QiYjS1QpAVrkmVlXqy5gykq4nGWMz9AS4Rg==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.4.1.tgz", + "integrity": "sha512-35kYg6JoOgwq8sE4rhYkVWwa6aAIgOtT+Ob0gitnShjwUwZmhrmy7Jco/5kJNF4PnLXgt9Hwq+geEMS+WrjU1g==", "license": "MIT", + "workspaces": [ + "www" + ], "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", "clsx": "^2.1.1", diff --git a/package.json b/package.json index 00d6063..2abb3df 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,11 @@ "dependencies": { "@gfazioli/mantine-text-animate": "^2.3.3", "@hello-pangea/dnd": "^18.0.1", - "@mantine/core": "^8.3.6", - "@mantine/dates": "^8.3.6", - "@mantine/form": "^8.3.6", - "@mantine/hooks": "^8.3.6", - "@mantine/notifications": "^8.3.6", + "@mantine/core": "^8.3.7", + "@mantine/dates": "^8.3.7", + "@mantine/form": "^8.3.7", + "@mantine/hooks": "^8.3.7", + "@mantine/notifications": "^8.3.7", "@tanstack/react-query": "^5.90.7", "@tanstack/react-query-devtools": "^5.90.2", "@tanstack/react-query-persist-client": "^5.90.9", @@ -27,7 +27,7 @@ "react-dom": "^19.2.0", "react-icons": "^5.5.0", "react-router-dom": "^7.9.5", - "recharts": "^3.3.0" + "recharts": "^3.4.1" }, "devDependencies": { "@types/node": "^24.10.0", diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx index e0d23b1..1d7bf4d 100644 --- a/src/components/DataTable/DataTable.tsx +++ b/src/components/DataTable/DataTable.tsx @@ -1,4 +1,4 @@ -import { Button, Group, Text } from '@mantine/core'; +import { Button, Group, ScrollArea, Text } from '@mantine/core'; import { type ColumnFiltersState, flexRender, @@ -11,6 +11,7 @@ import { useReactTable, } from '@tanstack/react-table'; import { type Dispatch, type SetStateAction, useEffect, useState } from 'react'; +import { scrollAreaClasses } from 'styles'; import { Filter } from './components'; export function DataTable({ @@ -62,144 +63,168 @@ export function DataTable({ } }, [filtersEnabled]); return ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row, index) => ( - { - row.toggleExpanded(); - }} - > - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} - - - {table.getFooterGroups().map((footerGroup) => ( - - {footerGroup.headers.map((header) => ( - - ))} - - ))} - - + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row, index) => ( + { + row.toggleExpanded(); }} > - Total Entries: {table.getRowCount()} - - - - -
- {header.isPlaceholder ? null : ( - <> - - {filtersEnabled ? ( - item[header.id]))]} - resultCount={table.getFilteredRowModel().rows.length} - /> - ) : null} - - )} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
- {header.isPlaceholder - ? null - : flexRender(header.column.columnDef.footer, header.getContext())} -
- ( +
+ {header.isPlaceholder ? null : ( + <> + + {filtersEnabled ? ( + item[header.id]))]} + resultCount={table.getFilteredRowModel().rows.length} + /> + ) : null} + + )} +
+ {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + ))} + + + {table.getFooterGroups().map((footerGroup) => ( + + {footerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.footer, header.getContext())} + + ))} + + ))} + + + + Total Entries: {table.getCoreRowModel().rows.length} + + + + + + ); } diff --git a/src/components/DataTable/components/Filter.tsx b/src/components/DataTable/components/Filter.tsx index 5ca40f3..65d7739 100644 --- a/src/components/DataTable/components/Filter.tsx +++ b/src/components/DataTable/components/Filter.tsx @@ -13,7 +13,7 @@ import { import { DatePickerInput } from '@mantine/dates'; import type { Column, RowData } from '@tanstack/react-table'; import { DebouncedInput } from 'components'; -import { selectClasses } from 'styles'; +import { datePickerInputClasses, selectClasses } from 'styles'; declare module '@tanstack/react-table' { //allows us to define custom properties for our columns @@ -57,16 +57,7 @@ export function Filter({ column.setFilterValue(value)} /> @@ -99,6 +90,12 @@ export function Filter({ options: selectClasses.menuSelectOptions, option: selectClasses.menuSelectOption, }} + styles={{ + input: { + border: 'none', + borderRadius: 0, + }, + }} data={options .map((option: ComboboxItem) => { return { value: option, label: option }; diff --git a/src/components/DebouncedInput.tsx b/src/components/DebouncedInput.tsx index a6ec25f..8136082 100644 --- a/src/components/DebouncedInput.tsx +++ b/src/components/DebouncedInput.tsx @@ -1,6 +1,7 @@ import { ActionIcon, TextInput } from '@mantine/core'; import { useEffect, useState } from 'react'; import { FiX } from 'react-icons/fi'; +import { textInputClasses } from 'styles'; export function DebouncedInput({ value: initialValue, @@ -34,11 +35,20 @@ export function DebouncedInput({ p={0} onClick={(e) => e.stopPropagation()} onChange={(e) => setValue(e.target.value)} + classNames={textInputClasses} styles={{ input: { borderRadius: 0, - border: 'none', + borderStyle: 'none', color: 'var(--mantine-color-primary-0)', + '&::placeholder': { + color: 'red !important', + }, + }, + wrapper: { + '&::placeholder': { + color: 'red !important', + }, }, }} rightSection={ diff --git a/src/styles/DatePickerInput.module.css b/src/styles/DatePickerInput.module.css new file mode 100644 index 0000000..15e17b1 --- /dev/null +++ b/src/styles/DatePickerInput.module.css @@ -0,0 +1,55 @@ +.input { + border-radius: 0 !important; + border: none !important; + color: var(--mantine-color-primary-0) !important; +} +.levelsGroup { + background-color: var(--mantine-color-background-0) !important; +} +.day { + color: var(--mantine-color-primary-0) !important; + &:hover { + color: var(--mantine-color-background-0) !important; + background-color: var(--mantine-color-primary-0) !important; + } + &[data-weekend="true"] { + color: var(--mantine-color-accent-0) !important; + } +} +.monthsListControl { + color: var(--mantine-color-primary-0) !important; + &:hover { + color: var(--mantine-color-background-0) !important; + background-color: var(--mantine-color-primary-0) !important; + } + &[data-weekend="true"] { + color: var(--mantine-color-accent-0) !important; + } +} +.yearsListControl { + color: var(--mantine-color-primary-0) !important; + &:hover { + color: var(--mantine-color-background-0) !important; + background-color: var(--mantine-color-primary-0) !important; + } + &[data-weekend="true"] { + color: var(--mantine-color-accent-0) !important; + } +} +.weekday { + color: var(--mantine-color-border-0) !important; +} +.calendarHeaderControl { + color: var(--mantine-color-primary-0) !important; + &:hover { + color: var(--mantine-color-background-0) !important; + background-color: var(--mantine-color-primary-0) !important; + } +} +.calendarHeaderLevel { + color: var(--mantine-color-primary-0) !important; + &:hover { + color: var(--mantine-color-background-0) !important; + background-color: var(--mantine-color-primary-0) !important; + } +} \ No newline at end of file diff --git a/src/styles/index.ts b/src/styles/index.ts index 9eed3e8..8e84dfc 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3,6 +3,7 @@ import boxClasses from './Box.module.css'; import buttonClasses from './Button.module.css'; import cardClasses from './Card.module.css'; import colorSwatchClasses from './ColorSwatch.module.css'; +import datePickerInputClasses from './DatePickerInput.module.css'; import menuClasses from './Menu.module.css'; import modalClasses from './Modal.module.css'; import multiSelectClasses from './MultiSelect.module.css'; @@ -23,6 +24,7 @@ export { buttonClasses, cardClasses, colorSwatchClasses, + datePickerInputClasses, menuClasses, modalClasses, multiSelectClasses,