Merge pull request #503 from icflorescu/next

Expose tableRef & update docs

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

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/).
 

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() {
     <div className={classes.root}>
       <h2 className={classes.title}>{PRODUCT_NAME} is trusted by</h2>
       <Container className={classes.links}>
-        {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<HTMLImageElement> = {
-            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 (
-            <a key={name} className={classes.link} href={link} target="_blank" rel="noopener noreferrer" title={title}>
+            <a
+              key={name}
+              className={classes.link}
+              href={link}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={title}
+              style={
+                shift
+                  ? {
+                      marginTop: shift < 0 ? `-${shift}%` : undefined,
+                      marginBottom: shift > 0 ? `-${shift}%` : undefined,
+                    }
+                  : undefined
+              }
+            >
               {themed ? (
                 <>
                   <img className={classes.light} {...commonImageAttrs} src={`${ROOT_URL}${base}-light.${ext}`} />

package/DataTable.tsx

@@ -110,6 +110,7 @@ export function DataTable<T>({
   customRowAttributes,
   scrollViewportRef: scrollViewportRefProp,
   scrollAreaProps,
+  tableRef,
   bodyRef,
   m,
   my,
@@ -140,10 +141,12 @@ export function DataTable<T>({
   });
 
   const { ref: headerRef, height: headerHeight } = useElementOuterSize<HTMLTableSectionElement>();
-  const { ref: tableRef, width: tableWidth, height: tableHeight } = useElementOuterSize<HTMLTableElement>();
+  const { ref: localTableRef, width: tableWidth, height: tableHeight } = useElementOuterSize<HTMLTableElement>();
   const { ref: footerRef, height: footerHeight } = useElementOuterSize<HTMLTableSectionElement>();
   const { ref: paginationRef, height: paginationHeight } = useElementOuterSize<HTMLDivElement>();
 
+  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<T>({
           scrollAreaProps={scrollAreaProps}
         >
           <Table
-            ref={tableRef}
+            ref={mergedTableRef}
             horizontalSpacing={horizontalSpacing}
             className={clsx(
               'mantine-datatable-table',

package/types/DataTableProps.ts

@@ -202,6 +202,12 @@ export type DataTableProps<T = Record<string, unknown>> = {
    * Additional props passed to the underlying `ScrollArea` element.
    */
   scrollAreaProps?: Omit<ScrollAreaProps, 'classNames' | 'styles' | 'onScrollPositionChange'>;
+
+  /**
+   * Ref pointing to the table element.
+   */
+  tableRef?: ((instance: HTMLTableElement | null) => void) | React.RefObject<HTMLTableElement>;
+
   /**
    * Ref pointing to the table body element.
    */