diff --git a/CHANGELOG.md b/CHANGELOG.md index 35ddcd41a..e74de7807 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ The following is a list of notable changes to the Mantine DataTable component. Minor versions that are not listed in the changelog are bug fixes and small improvements. +## 7.4.1 (2024-01-04) + +- Expose `tableRef` property to access the table element + ## 7.4.0 (2024-01-04) - Ensure compatibility with Mantine 7.4 diff --git a/README.md b/README.md index fef0d8bae..7f8e70a36 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ The lightweight, dependency-free, **dark-theme aware** table component for your > _Thank you for the wonderful, useful, and beautiful DataTable that has allowed me to create several applications without any problem 👏_ -Mantine DataTable is used by developers and companies around the world, such as: [Namecheap](https://www.namecheap.com/), [EasyWP](https://www.easywp.com/), [kapa.ai](https://kapa.ai/), [exdatis.ai](https://exdatis.ai/), [teachfloor](https://www.teachfloor.com/), [MARKUP](https://www.getmarkup.com/), [BookieBase](https://bookiebase.ie/), [zipline](https://zipline.diced.tech/), [Pachtop](https://github.com/pacholoamit/pachtop), [Ganymede](https://github.com/Zibbp/ganymede), [COH3 Stats](https://coh3stats.com/), [Culver City Rental Registry](https://www.ccrentals.org/) and many more. +Mantine DataTable is used by developers and companies around the world, such as: [SegmentX](https://segmentx.ai), [Namecheap](https://www.namecheap.com/), [EasyWP](https://www.easywp.com/), [kapa.ai](https://kapa.ai/), [exdatis.ai](https://exdatis.ai/), [teachfloor](https://www.teachfloor.com/), [MARKUP](https://www.getmarkup.com/), [BookieBase](https://bookiebase.ie/), [zipline](https://zipline.diced.tech/), [Pachtop](https://github.com/pacholoamit/pachtop), [Ganymede](https://github.com/Zibbp/ganymede), [COH3 Stats](https://coh3stats.com/), [Culver City Rental Registry](https://www.ccrentals.org/) and many more. If you're using Mantine DataTable in your project, please drop me a line at the email address listed in my [GitHub profile](https://github.com/icflorescu) and I'll be happy to add it to the list and on the [documentation website](https://icflorescu.github.io/mantine-datatable/). diff --git a/components/PackageUsers.tsx b/components/PackageUsers.tsx index 443539476..bf45ef3ec 100644 --- a/components/PackageUsers.tsx +++ b/components/PackageUsers.tsx @@ -3,7 +3,20 @@ import { Container, Text } from '@mantine/core'; import { PRODUCT_NAME, WEBSITE_LINK } from '~/app/config'; import classes from './PackageUsers.module.css'; -const USERS = [ +const USERS: { + name: string; + showText?: boolean; + logo: { base: string; ext: 'png' | 'svg'; themed?: true; scale?: number; shift?: number }; + link: string; + shift?: number; +}[] = [ + { + name: 'SegmentX', + showText: true, + logo: { base: 'segmentx', ext: 'png', shift: 6, scale: 110 }, + link: 'https://segmentx.ai', + shift: 1.75, + }, { name: 'Namecheap', logo: { base: 'namecheap', ext: 'svg', themed: true }, @@ -52,26 +65,30 @@ const USERS = [ { name: 'Pachtop', showText: true, - logo: { base: 'pachtop', ext: 'png', scale: 84, shift: 2 }, + logo: { base: 'pachtop', ext: 'png', scale: 84, shift: 5 }, link: 'https://github.com/pacholoamit/pachtop', + shift: 0.25, }, { name: 'Ganymede', showText: true, - logo: { base: 'ganymede', ext: 'png', scale: 82, shift: 2 }, + logo: { base: 'ganymede', ext: 'png', scale: 82, shift: 4 }, link: 'https://github.com/Zibbp/ganymede', + shift: 0.25, }, { name: 'COH3 Stats', showText: true, - logo: { base: 'coh3-stats', ext: 'png', scale: 80, shift: 1 }, + logo: { base: 'coh3-stats', ext: 'png', scale: 80, shift: 4.5 }, link: 'https://coh3stats.com', + shift: 0.5, }, { name: 'ccrentals.org', showText: true, - logo: { base: 'ccrentals', ext: 'svg', themed: true, scale: 84, shift: 1 }, + logo: { base: 'ccrentals', ext: 'svg', themed: true, scale: 84, shift: 3 }, link: 'https://www.ccrentals.org', + shift: 0.5, }, ]; @@ -82,15 +99,34 @@ export function PackageUsers() {

{PRODUCT_NAME} is trusted by

- {USERS.map(({ name, logo: { base, ext, themed, scale, shift }, link, showText }) => { + {USERS.map(({ name, logo: { base, ext, themed, scale, shift: imageShift }, link, showText, shift }) => { const title = `${name} is using ${PRODUCT_NAME}`; const commonImageAttrs: React.ImgHTMLAttributes = { - style: { height: `${scale || '100'}%`, marginTop: shift ? `-${shift}%` : undefined }, + style: { + height: `${scale || '100'}%`, + marginTop: imageShift && imageShift > 0 ? `-${imageShift}%` : undefined, + marginBottom: imageShift && imageShift < 0 ? `-${imageShift}%` : undefined, + }, alt: title, }; return ( - + 0 ? `-${shift}%` : undefined, + } + : undefined + } + > {themed ? ( <> diff --git a/package/DataTable.tsx b/package/DataTable.tsx index d0cce4b81..c83f1d502 100644 --- a/package/DataTable.tsx +++ b/package/DataTable.tsx @@ -110,6 +110,7 @@ export function DataTable({ customRowAttributes, scrollViewportRef: scrollViewportRefProp, scrollAreaProps, + tableRef, bodyRef, m, my, @@ -140,10 +141,12 @@ export function DataTable({ }); const { ref: headerRef, height: headerHeight } = useElementOuterSize(); - const { ref: tableRef, width: tableWidth, height: tableHeight } = useElementOuterSize(); + const { ref: localTableRef, width: tableWidth, height: tableHeight } = useElementOuterSize(); const { ref: footerRef, height: footerHeight } = useElementOuterSize(); const { ref: paginationRef, height: paginationHeight } = useElementOuterSize(); + const mergedTableRef = useMergedRef(localTableRef, tableRef); + const [scrolledToTop, setScrolledToTop] = useState(true); const [scrolledToBottom, setScrolledToBottom] = useState(true); const [scrolledToLeft, setScrolledToLeft] = useState(true); @@ -294,7 +297,7 @@ export function DataTable({ scrollAreaProps={scrollAreaProps} > > = { * Additional props passed to the underlying `ScrollArea` element. */ scrollAreaProps?: Omit; + + /** + * Ref pointing to the table element. + */ + tableRef?: ((instance: HTMLTableElement | null) => void) | React.RefObject; + /** * Ref pointing to the table body element. */ diff --git a/public/users/segmentx.png b/public/users/segmentx.png new file mode 100644 index 000000000..e68eea06b Binary files /dev/null and b/public/users/segmentx.png differ