fix: use 0 for 0px

Author: yergom

package/DataTable.css

@@ -37,15 +37,15 @@
     linear-gradient(to right, rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0)),
     linear-gradient(to right, rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0) 30%);
 
-  --mantine-datatable-header-height: 0px;
-  --mantine-datatable-footer-height: 0px;
-  --mantine-datatable-selection-column-width: 0px;
+  --mantine-datatable-header-height: 0;
+  --mantine-datatable-footer-height: 0;
+  --mantine-datatable-selection-column-width: 0;
   --mantine-datatable-top-shadow-opacity: 0;
   --mantine-datatable-left-shadow-opacity: 0;
   --mantine-datatable-bottom-shadow-opacity: 0;
   --mantine-datatable-right-shadow-opacity: 0;
   --mantine-datatable-footer-position: sticky;
-  --mantine-datatable-footer-bottom: 0px;
+  --mantine-datatable-footer-bottom: 0;
   --mantine-datatable-last-row-border-bottom: unset;
 
   position: relative;

package/DataTableEmptyState.css

@@ -9,8 +9,8 @@
   color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
   opacity: 0;
   transition: opacity 0.2s;
-  padding-top: var(--mantine-datatable-header-height, 0px);
-  padding-bottom: var(--mantine-datatable-footer-height, 0px);
+  padding-top: var(--mantine-datatable-header-height, 0);
+  padding-bottom: var(--mantine-datatable-footer-height, 0);
 
   &[data-active] {
     opacity: 1;

package/DataTableLoader.css

@@ -9,8 +9,8 @@
   background: alpha(var(--mantine-datatable-background-color), 0.75);
   opacity: 0;
   transition: opacity 0.2s;
-  padding-top: var(--mantine-datatable-header-height, 0px);
-  padding-bottom: var(--mantine-datatable-footer-height, 0px);
+  padding-top: var(--mantine-datatable-header-height, 0);
+  padding-bottom: var(--mantine-datatable-footer-height, 0);
 }
 
 .mantine-datatable-loader-fetching {

package/hooks/useDataTableInjectCssVariables.ts

@@ -84,7 +84,7 @@ export function useDataTableInjectCssVariables({
       (rect) => {
         setCssVar(root.current, VAR_HEADER_HEIGHT, `${rect.height}px`);
       },
-      () => setCssVar(root.current, VAR_HEADER_HEIGHT, '0px')
+      () => setCssVar(root.current, VAR_HEADER_HEIGHT, '0')
     );
   }, [header.current]);
 
@@ -94,7 +94,7 @@ export function useDataTableInjectCssVariables({
       (rect) => {
         setCssVar(root.current, VAR_FOOTER_HEIGHT, `${rect.height}px`);
       },
-      () => setCssVar(root.current, VAR_FOOTER_HEIGHT, '0px')
+      () => setCssVar(root.current, VAR_FOOTER_HEIGHT, '0')
     );
   }, [footer.current]);
 
@@ -104,7 +104,7 @@ export function useDataTableInjectCssVariables({
       (rect) => {
         setCssVar(root.current, VAR_SELECTION_COLUMN_WIDTH, `${rect.width}px`);
       },
-      () => setCssVar(root.current, VAR_SELECTION_COLUMN_WIDTH, '0px')
+      () => setCssVar(root.current, VAR_SELECTION_COLUMN_WIDTH, '0')
     );
   }, [selectionColumnHeader.current]);
 
@@ -132,7 +132,7 @@ export function useDataTableInjectCssVariables({
       const diff = tableRect.height - scrollRect.height;
       const relative = diff < 0;
       setCssVar(root.current, '--mantine-datatable-footer-position', relative ? 'relative' : 'sticky');
-      setCssVar(root.current, '--mantine-datatable-footer-bottom', relative ? `${diff}px` : '0px');
+      setCssVar(root.current, '--mantine-datatable-footer-bottom', relative ? `${diff}px` : '0');
     }
 
     function processLastRowBottomBorder() {