Improve column pinning related CSS

icflorescu · Jan 21, 2024 · c4d1351 · c4d1351
1 parent cc9c8ce
commit c4d1351
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,12 @@
 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.6 (2024-01-21)
+
+- Improve first and last column pinning CSS to allow combining the feature with column groups
+- Improve last column pinning CSS to fix a minor glitch in webkit browsers
+- A few documentation improvements
+
 ## 7.4.5 (2024-01-20)
 
 - Improve column toggling UX & code efficiency

diff --git a/app/examples/basic-usage/page.tsx b/app/examples/basic-usage/page.tsx
@@ -24,8 +24,7 @@ export default async function BasicUsageExamplePage() {
       <PageTitle of={PATH} />
       <Txt>
         In its most basic usage scenario, the DataTable component only requires <Code>records</Code> and{' '}
-        <Code>columns</Code>
-        properties to be set:
+        <Code>columns</Code> properties to be set:
       </Txt>
       <CodeBlock tabs={{ code, keys: ['BasicUsageExample.tsx', 'companies.json'] }} />
       <Txt>The code above will produce the following result:</Txt>

diff --git a/app/examples/pinning-the-first-column/PinFirstColumnExamples.tsx b/app/examples/pinning-the-first-column/PinFirstColumnExamples.tsx
@@ -259,8 +259,20 @@ export function PinFirstColumnExampleWithColumnGroups() {
         {
           id: 'name',
           title: '', // 👈 empty title
+          style: { borderBottomColor: 'transparent' }, // 👈 hide the bottom border
           columns: [
-            { accessor: 'name', noWrap: true, render: ({ firstName, lastName }) => `${firstName} ${lastName}` },
+            {
+              accessor: 'name',
+              title: (
+                // 👇 use an absolutely positioned custom title component
+                //    to center the title vertically
+                <Text inherit pos="absolute" mt={-28}>
+                  Name
+                </Text>
+              ),
+              noWrap: true,
+              render: ({ firstName, lastName }) => `${firstName} ${lastName}`,
+            },
           ],
         },
         // example-skip other column groups
@@ -282,13 +294,18 @@ export function PinFirstColumnExampleWithColumnGroups() {
         },
         {
           id: 'actions',
-          style: { borderBottomColor: 'transparent' },
-          textAlign: 'center',
+          title: '', // 👈 empty title
+          style: { borderBottomColor: 'transparent' }, // 👈 hide the bottom border
           columns: [
             {
               accessor: 'actions',
-              title: '', // 👈 empty title
-              textAlign: 'right',
+              title: (
+                // 👇 use an absolutely positioned custom title component
+                //    to center the title vertically
+                <Text inherit pos="absolute" mt={-28} ml={12}>
+                  Actions
+                </Text>
+              ),
               render: (employee) => (
                 <Group gap={4} wrap="nowrap">
                   <ActionIcon

diff --git a/app/examples/pinning-the-first-column/page.tsx b/app/examples/pinning-the-first-column/page.tsx
@@ -3,6 +3,7 @@ import type { Route } from 'next';
 import { CodeBlock } from '~/components/CodeBlock';
 import { InternalLink } from '~/components/InternalLink';
 import { PageNavigation } from '~/components/PageNavigation';
+import { PageSubtitle } from '~/components/PageSubtitle';
 import { PageTitle } from '~/components/PageTitle';
 import { Txt } from '~/components/Txt';
 import { readCodeFile } from '~/lib/code';
@@ -58,9 +59,15 @@ export default async function PinFirstColumnExamplePage() {
       <PinFirstAndLastColumnsExampleWithRecordSelection />
       <Txt>Here is the code:</Txt>
       <CodeBlock code={code['first-last-and-record-selection']} />
+      <PageSubtitle value="Using with column grouping" />
       <Txt warning title="Warning!">
         When using this feature with <InternalLink to="/examples/column-grouping">column grouping</InternalLink>, you
-        need to <strong>make sure that the first group contains only one column</strong>:
+        need to <strong>make sure that the first group contains only one column</strong>.
+      </Txt>
+      <Txt>
+        Here is an example of how you can pin the first column when using column grouping. Notice how the first group
+        contains only one column, and how we are using an absolutely positioned custom title component to create the
+        illusion that the <em>Name</em> text is centered vertically:
       </Txt>
       <PinFirstColumnExampleWithColumnGroups />
       <Txt>Here is the code:</Txt>

diff --git a/app/examples/pinning-the-last-column/PinLastColumnExamples.tsx b/app/examples/pinning-the-last-column/PinLastColumnExamples.tsx
@@ -140,13 +140,18 @@ export function PinLastColumnExampleWithColumnGroups() {
         // 👇 this group has only one column, so it will be pinned to the right side of the table
         {
           id: 'actions',
-          style: { borderBottomColor: 'transparent' },
-          textAlign: 'center',
+          title: '', // 👈 empty title
+          style: { borderBottomColor: 'transparent' }, // 👈 hide the group bottom border
           columns: [
             {
               accessor: 'actions',
-              title: '', // 👈 empty title
-              textAlign: 'right',
+              title: (
+                // 👇 use an absolutely positioned custom title component
+                //    to center the title vertically
+                <Text inherit pos="absolute" mt={-28} ml={12}>
+                  Actions
+                </Text>
+              ),
               render: (employee) => (
                 <Group gap={4} wrap="nowrap">
                   <ActionIcon

diff --git a/app/examples/pinning-the-last-column/page.tsx b/app/examples/pinning-the-last-column/page.tsx
@@ -3,6 +3,7 @@ import type { Route } from 'next';
 import { CodeBlock } from '~/components/CodeBlock';
 import { InternalLink } from '~/components/InternalLink';
 import { PageNavigation } from '~/components/PageNavigation';
+import { PageSubtitle } from '~/components/PageSubtitle';
 import { PageTitle } from '~/components/PageTitle';
 import { Txt } from '~/components/Txt';
 import { readCodeFile } from '~/lib/code';
@@ -40,9 +41,15 @@ export default async function PinLastColumnExamplePage() {
       <PinLastColumnExample />
       <Txt>Here is the code:</Txt>
       <CodeBlock code={code['default']} />
+      <PageSubtitle value="Using with column grouping" />
       <Txt warning title="Warning!">
         When using this feature with <InternalLink to="/examples/column-grouping">column grouping</InternalLink>, you
-        need to <strong>make sure that the last group contains only one column</strong>:
+        need to <strong>make sure that the last group contains only one column</strong>.
+      </Txt>
+      <Txt>
+        Here is an example of how you can pin the last column when using column grouping. Notice how the last group
+        contains only one column, and how we are using an absolutely positioned custom title component to create the
+        illusion that the <em>Actions</em> text is centered vertically:
       </Txt>
       <PinLastColumnExampleWithColumnGroups />
       <Txt>Here is the code:</Txt>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.4.5",
+  "version": "7.4.6",
   "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",

diff --git a/package/DataTable.css b/package/DataTable.css
@@ -102,9 +102,14 @@
   th:last-of-type,
   td:not(.mantine-datatable-row-expansion-cell):last-of-type {
     position: sticky;
-    right: 0;
     z-index: 1;
 
+    /* This is to fix a minor visual glitch in webkit browsers */
+    right: rem(-0.4px);
+    @-moz-document url-prefix() {
+      right: 0;
+    }
+
     &::after {
       content: '';
       position: absolute;
@@ -158,7 +163,8 @@
 .mantine-datatable-pin-first-column {
   &:not(.mantine-datatable-selection-column-visible) th:first-of-type,
   &:not(.mantine-datatable-selection-column-visible) td:not(.mantine-datatable-row-expansion-cell):first-of-type,
-  &.mantine-datatable-selection-column-visible th:not(.mantine-datatable-column-group-header-cell):nth-of-type(2),
+  &.mantine-datatable-selection-column-visible th:first-of-type,
+  &.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2),
   &.mantine-datatable-selection-column-visible td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2) {
     position: sticky;
     left: var(--mantine-datatable-selection-column-width);
@@ -179,11 +185,15 @@
     }
   }
 
+  &.mantine-datatable-selection-column-visible th.mantine-datatable-header-selector-cell {
+    left: 0;
+  }
+
   &:not(.mantine-datatable-selection-column-visible) th:first-of-type,
   &:not(.mantine-datatable-selection-column-visible)
     tr[data-with-row-border]:not(:last-of-type)
     td:not(.mantine-datatable-row-expansion-cell):first-of-type,
-  &.mantine-datatable-selection-column-visible th:not(.mantine-datatable-column-group-header-cell):nth-of-type(2),
+  &.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2),
   &.mantine-datatable-selection-column-visible
     tr[data-with-row-border]:not(:last-of-type)
     td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2) {
@@ -221,8 +231,8 @@
   &-scrolled:not(.mantine-datatable-selection-column-visible) th:first-of-type,
   &-scrolled:not(.mantine-datatable-selection-column-visible)
     td:not(.mantine-datatable-row-expansion-cell):first-of-type,
-  &-scrolled.mantine-datatable-selection-column-visible
-    th:not(.mantine-datatable-column-group-header-cell):nth-of-type(2),
+  &-scrolled.mantine-datatable-selection-column-visible th:first-of-type,
+  &-scrolled.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2),
   &-scrolled.mantine-datatable-selection-column-visible td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2) {
     &::after {
       opacity: 1;