Implement pinFirstColumn, fix minor UI glitch, update deps

CHANGELOG.md

@@ -3,8 +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)
+## 7.4.1 (2024-01-08)
 
+- Implement `pinFirstColumn` feature
+- Fix minor UI glitch when using highlight on hover and the table contains no records (issue [#508](https://github.com/icflorescu/mantine-datatable/issues/508))
 - Expose `tableRef` property to access the table element
 
 ## 7.4.0 (2024-01-04)

app/config.ts

@@ -207,6 +207,11 @@ export const ROUTES: RouteInfo[] = [
     title: 'Pinning the last column',
     description: `Example: how to pin the last column on ${PRODUCT_NAME}`,
   },
+  {
+    href: '/examples/pinning-the-first-column',
+    title: 'Pinning the first column',
+    description: `Example: how to pin the first column on ${PRODUCT_NAME}`,
+  },
   {
     href: '/examples/links-or-buttons-inside-clickable-rows-or-cells',
     title: 'Links or buttons inside clickable rows or cells',

app/examples/pinning-the-first-column/PinFirstColumnExamples.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import { ActionIcon, Box, Button, Grid, GridCol, Group, Stack, Text } from '@mantine/core';
+import { closeModal, openModal } from '@mantine/modals';
+import { IconEdit, IconEye, IconTrash } from '@tabler/icons-react';
+import { DataTable } from '__PACKAGE__';
+import { useState } from 'react';
+import { employees, type Employee } from '~/data';
+
+const records = employees.slice(0, 5);
+
+const showModal = ({ employee, action }: { employee: Employee; action: 'view' | 'edit' | 'delete' }) => {
+  openModal({
+    modalId: action,
+    title:
+      action === 'view'
+        ? 'Showing company information'
+        : action === 'edit'
+          ? 'Editing company information'
+          : 'Deleting company',
+    children: (
+      <Stack>
+        <Text>
+          {action === 'view'
+            ? 'Here’s where you could show more information...'
+            : action === 'edit'
+              ? 'Here’s where you could put an edit form...'
+              : 'Here’s where you could ask for confirmation before deleting...'}
+        </Text>
+        <Grid gutter="xs">
+          <GridCol span={2}>ID</GridCol>
+          <GridCol span={10}>{employee.id}</GridCol>
+          <GridCol span={2}>First name</GridCol>
+          <GridCol span={10}>{employee.firstName}</GridCol>
+          <GridCol span={2}>Last name</GridCol>
+          <GridCol span={10}>{employee.lastName}</GridCol>
+        </Grid>
+        <Button onClick={() => closeModal(action)}>Close</Button>
+      </Stack>
+    ),
+  });
+};
+
+export function PinFirstColumnExampleWithoutRecordSelection() {
+  // example-start without-record-selection
+  return (
+    <DataTable
+      pinFirstColumn // 👈 make sure the first column is always visible
+      // example-skip other table props
+      withTableBorder
+      columns={[
+        {
+          accessor: 'actions',
+          title: (
+            <Group gap={10} pl={3} wrap="nowrap" c="dimmed">
+              <IconEye size={16} />
+              <IconEdit size={16} />
+              <IconTrash size={16} />
+            </Group>
+          ),
+          render: (employee) => (
+            <Group gap={4} wrap="nowrap">
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="green"
+                onClick={() => showModal({ employee, action: 'view' })}
+              >
+                <IconEye size={16} />
+              </ActionIcon>
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="blue"
+                onClick={() => showModal({ employee, action: 'edit' })}
+              >
+                <IconEdit size={16} />
+              </ActionIcon>
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="red"
+                onClick={() => showModal({ employee, action: 'delete' })}
+              >
+                <IconTrash size={16} />
+              </ActionIcon>
+            </Group>
+          ),
+        },
+        { accessor: 'firstName', noWrap: true },
+        { accessor: 'lastName', noWrap: true },
+        { accessor: 'department.name', title: 'Department' },
+        { accessor: 'department.company.name', title: 'Company', noWrap: true },
+        { accessor: 'department.company.city', title: 'City', noWrap: true },
+        { accessor: 'department.company.state', title: 'State' },
+        { accessor: 'department.company.streetAddress', title: 'Address', noWrap: true },
+        { accessor: 'department.company.missionStatement', title: 'Mission statement', noWrap: true },
+      ]}
+      records={records}
+      // example-resume
+    />
+  );
+  // example-end
+}
+
+export function PinFirstColumnExampleWithRecordSelection() {
+  const [selectedRecord, setSelectedRecord] = useState<Employee[]>([]);
+
+  // example-start with-record-selection
+  return (
+    <DataTable
+      pinFirstColumn // 👈 make sure the first column is always visible
+      selectedRecords={selectedRecord}
+      onSelectedRecordsChange={setSelectedRecord}
+      // example-skip other table props
+      withTableBorder
+      columns={[
+        {
+          accessor: 'actions',
+          title: (
+            <Group gap={10} pl={3} wrap="nowrap" c="dimmed">
+              <IconEye size={16} />
+              <IconEdit size={16} />
+              <IconTrash size={16} />
+            </Group>
+          ),
+          render: (employee) => (
+            <Group gap={4} wrap="nowrap">
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="green"
+                onClick={() => showModal({ employee, action: 'view' })}
+              >
+                <IconEye size={16} />
+              </ActionIcon>
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="blue"
+                onClick={() => showModal({ employee, action: 'edit' })}
+              >
+                <IconEdit size={16} />
+              </ActionIcon>
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="red"
+                onClick={() => showModal({ employee, action: 'delete' })}
+              >
+                <IconTrash size={16} />
+              </ActionIcon>
+            </Group>
+          ),
+        },
+        { accessor: 'firstName', noWrap: true },
+        { accessor: 'lastName', noWrap: true },
+        { accessor: 'department.name', title: 'Department' },
+        { accessor: 'department.company.name', title: 'Company', noWrap: true },
+        { accessor: 'department.company.city', title: 'City', noWrap: true },
+        { accessor: 'department.company.state', title: 'State' },
+        { accessor: 'department.company.streetAddress', title: 'Address', noWrap: true },
+        { accessor: 'department.company.missionStatement', title: 'Mission statement', noWrap: true },
+      ]}
+      records={records}
+      // example-resume
+    />
+  );
+  // example-end
+}
+
+export function PinFirstAndLastColumnsExampleWithRecordSelection() {
+  const [selectedRecord, setSelectedRecord] = useState<Employee[]>([]);
+
+  // example-start first-last-and-record-selection
+  return (
+    <DataTable
+      pinFirstColumn // 👈 make sure the first column is always visible
+      pinLastColumn // 👈 make sure the last column is always visible
+      selectedRecords={selectedRecord}
+      onSelectedRecordsChange={setSelectedRecord}
+      // example-skip other table props
+      withTableBorder
+      columns={[
+        {
+          accessor: 'view-and-edit',
+          title: (
+            <Group gap={10} pl={3} wrap="nowrap" c="dimmed">
+              <IconEye size={16} />
+              <IconEdit size={16} />
+            </Group>
+          ),
+          render: (employee) => (
+            <Group gap={4} wrap="nowrap">
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="green"
+                onClick={() => showModal({ employee, action: 'view' })}
+              >
+                <IconEye size={16} />
+              </ActionIcon>
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="blue"
+                onClick={() => showModal({ employee, action: 'edit' })}
+              >
+                <IconEdit size={16} />
+              </ActionIcon>
+            </Group>
+          ),
+        },
+        { accessor: 'firstName', noWrap: true },
+        { accessor: 'lastName', noWrap: true },
+        { accessor: 'department.name', title: 'Department' },
+        { accessor: 'department.company.name', title: 'Company', noWrap: true },
+        { accessor: 'department.company.city', title: 'City', noWrap: true },
+        { accessor: 'department.company.state', title: 'State' },
+        { accessor: 'department.company.streetAddress', title: 'Address', noWrap: true },
+        { accessor: 'department.company.missionStatement', title: 'Mission statement', noWrap: true },
+        {
+          accessor: 'delete',
+          title: (
+            <Box pl={3} c="dimmed">
+              <IconTrash size={16} />
+            </Box>
+          ),
+          render: (employee) => (
+            <ActionIcon
+              size="sm"
+              variant="subtle"
+              color="red"
+              onClick={() => showModal({ employee, action: 'delete' })}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          ),
+        },
+      ]}
+      records={records}
+      // example-resume
+    />
+  );
+  // example-end
+}

app/examples/pinning-the-first-column/page.tsx

@@ -0,0 +1,65 @@
+import { Code } from '@mantine/core';
+import type { Route } from 'next';
+import { CodeBlock } from '~/components/CodeBlock';
+import { InternalLink } from '~/components/InternalLink';
+import { PageNavigation } from '~/components/PageNavigation';
+import { PageTitle } from '~/components/PageTitle';
+import { Txt } from '~/components/Txt';
+import { readCodeFile } from '~/lib/code';
+import { getRouteMetadata } from '~/lib/utils';
+import {
+  PinFirstAndLastColumnsExampleWithRecordSelection,
+  PinFirstColumnExampleWithoutRecordSelection,
+  PinFirstColumnExampleWithRecordSelection,
+} from './PinFirstColumnExamples';
+
+const PATH: Route = '/examples/pinning-the-first-column';
+
+export const metadata = getRouteMetadata(PATH);
+
+export default async function PinFirstColumnExamplePage() {
+  const code = await readCodeFile<
+    Record<'without-record-selection' | 'with-record-selection' | 'first-last-and-record-selection', string>
+  >(`${PATH}/PinFirstColumnExamples.tsx`);
+
+  return (
+    <>
+      <PageTitle of={PATH} />
+      <Code hidden>fix, fixed, affix, sticky</Code>
+      <Txt>
+        Pinning the first column to the left side of the table could be useful when you have a table with many columns
+        and you want to make sure the first column is always visible, even when the table is scrolled horizontally. For
+        instance, you could use this feature to ensure that{' '}
+        <InternalLink to="/examples/row-actions-cell">row actions</InternalLink> placed on the first column are always
+        visible.
+      </Txt>
+      <Txt>
+        You can achieve this by setting the <Code>pinFirstColumn</Code> DataTable prop to <Code>true</Code>:
+      </Txt>
+      <PinFirstColumnExampleWithoutRecordSelection />
+      <Txt>Here is the code:</Txt>
+      <CodeBlock code={code['without-record-selection']} />
+      <Txt>
+        You can also combine this feature with{' '}
+        <InternalLink to="/examples/records-selection">row selection</InternalLink>, in which case both the selection
+        checkbox and the first user-provided column will be pinned to the left side of the table:
+      </Txt>
+      <PinFirstColumnExampleWithRecordSelection />
+      <Txt>Here is the code:</Txt>
+      <CodeBlock code={code['with-record-selection']} />
+      <Txt>
+        You can use <InternalLink to="/examples/records-selection">row selection</InternalLink> and pin both the first
+        and <InternalLink to="/examples/pinning-the-last-column">the last column</InternalLink> at the same time:
+      </Txt>
+      <PinFirstAndLastColumnsExampleWithRecordSelection />
+      <Txt>Here is the code:</Txt>
+      <CodeBlock code={code['first-last-and-record-selection']} />
+      <Txt warning title="Warning">
+        Combining this feature with <InternalLink to="/examples/column-grouping">column grouping</InternalLink> may lead
+        to minor visual artifacts.
+      </Txt>
+      <Txt>Head over to the next example to discover more features.</Txt>
+      <PageNavigation of={PATH} />
+    </>
+  );
+}