Next

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.8.1 (2024-04-12)
+
+- Update all internal `<Text/>` components to output divs instead of paragraphs to avoid issues such as [#570](https://github.com/icflorescu/mantine-datatable/issues/570)
+
 ## 7.8.0 (2024-04-12)
 
 - Update peer dependencies to Mantine 7.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.8.0",
+  "version": "7.8.1",
   "description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more",
   "keywords": [
     "mantine",

package/DataTableEmptyState.tsx

@@ -19,7 +19,7 @@ export function DataTableEmptyState({ icon, text, pt, pb, active, children }: Da
               <IconDatabaseOff />
             </div>
           )}
-          <Text size="sm" c="dimmed">
+          <Text component="div" size="sm" c="dimmed">
             {text}
           </Text>
         </>

package/DataTablePageSizeSelector.tsx

@@ -37,7 +37,9 @@ export function DataTablePageSizeSelector({
 }: DataTablePageSizeSelectorComponentProps) {
   return (
     <Group gap="xs">
-      <Text size={size}>{label}</Text>
+      <Text component="div" size={size}>
+        {label}
+      </Text>
       <Menu withinPortal withArrow classNames={{ arrow: 'mantine-datatable-page-size-selector-menu-arrow' }}>
         <MenuTarget>
           <Button
@@ -78,7 +80,9 @@ export function DataTablePageSizeSelector({
                 disabled={isCurrent}
                 onClick={() => onChange(v)}
               >
-                <Text size={size}>{v}</Text>
+                <Text component="div" size={size}>
+                  {v}
+                </Text>
               </MenuItem>
             );
           })}

package/DataTablePagination.tsx

@@ -76,7 +76,7 @@ export const DataTablePagination = forwardRef(function DataTablePagination(
       className={clsx('mantine-datatable-pagination', className)}
       style={[{ flexDirection: isAbovePaginationWrapBreakpoint ? 'row' : 'column' }, style]}
     >
-      <Text className="mantine-datatable-pagination-text" size={paginationSize}>
+      <Text component="div" className="mantine-datatable-pagination-text" size={paginationSize}>
         {paginationTextValue}
       </Text>
       {recordsPerPageOptions && (