React Grid Column Pinning: Implementation Guide & Best Practices

1import { SimpleTable, HeaderObject } from "simple-table-core";
2import "simple-table-core/styles.css";
3
4const headers: HeaderObject[] = [
5  {
6    accessor: "id",
7    label: "ID",
8    width: 80,
9    pinned: "left", // Pin to the left
10    isSortable: true,
11    type: "number",
12  },
13  {
14    accessor: "name",
15    label: "Contact Name",
16    width: 200,
17    pinned: "left", // Also pin to the left
18    isSortable: true,
19    type: "string",
20  },
21  {
22    accessor: "company",
23    label: "Company",
24    width: 180,
25    isSortable: true,
26    type: "string",
27  },
28  {
29    accessor: "dealStage",
30    label: "Deal Stage",
31    width: 150,
32    isSortable: true,
33    type: "string",
34  },
35  {
36    accessor: "dealValue",
37    label: "Deal Value",
38    width: 120,
39    isSortable: true,
40    type: "number",
41    align: "right",
42    valueFormatter: ({ value }) => 
43      new Intl.NumberFormat('en-US', { 
44        style: 'currency', 
45        currency: 'USD' 
46      }).format(value as number),
47  },
48  {
49    accessor: "probability",
50    label: "Probability",
51    width: 100,
52    isSortable: true,
53    type: "number",
54    align: "right",
55  },
56  {
57    accessor: "lastContact",
58    label: "Last Contact",
59    width: 140,
60    isSortable: true,
61    type: "date",
62  },
63  {
64    accessor: "actions",
65    label: "Actions",
66    width: 120,
67    pinned: "right", // Pin to the right
68    align: "center",
69    cellRenderer: ({ row }) => (
70      <div className="flex gap-2 justify-center">
71        <button className="text-blue-600 hover:text-blue-800">Edit</button>
72        <button className="text-green-600 hover:text-green-800">View</button>
73      </div>
74    ),
75  },
76];
77
78export default function CRMTable({ data }) {
79  return (
80    <SimpleTable
81      defaultHeaders={headers}
82      rows={data}
83      rowIdAccessor="id"
84      height="500px"
85      theme="light"
86    />
87  );
88}

1import { useMediaQuery } from "react-responsive";
2
3export default function ResponsiveTable({ data }) {
4  const isMobile = useMediaQuery({ maxWidth: 768 });
5
6  const headers: HeaderObject[] = [
7    {
8      accessor: "id",
9      label: "ID",
10      width: 60,
11      pinned: isMobile ? undefined : "left", // Only pin on desktop
12    },
13    {
14      accessor: "name",
15      label: "Name",
16      width: 180,
17      pinned: "left", // Always pinned
18    },
19    // ... other columns
20    {
21      accessor: "actions",
22      label: "Actions",
23      width: 100,
24      pinned: isMobile ? undefined : "right", // Only pin on desktop
25    },
26  ];
27
28  return <SimpleTable defaultHeaders={headers} rows={data} />;
29}

1import { useState } from "react";
2
3export default function ConfigurableTable({ data }) {
4  const [pinnedColumns, setPinnedColumns] = useState<string[]>(["id", "name"]);
5
6  const headers: HeaderObject[] = [
7    {
8      accessor: "id",
9      label: "ID",
10      width: 60,
11      pinned: pinnedColumns.includes("id") ? "left" : undefined,
12    },
13    {
14      accessor: "name",
15      label: "Name",
16      width: 180,
17      pinned: pinnedColumns.includes("name") ? "left" : undefined,
18    },
19    // ... other columns
20  ];
21
22  const togglePin = (accessor: string) => {
23    setPinnedColumns((prev) =>
24      prev.includes(accessor)
25        ? prev.filter((col) => col !== accessor)
26        : [...prev, accessor]
27    );
28  };
29
30  return (
31    <div>
32      <div className="mb-4">
33        <strong>Pin/Unpin Columns:</strong>
34        <button onClick={() => togglePin("id")}>
35          {pinnedColumns.includes("id") ? "Unpin" : "Pin"} ID
36        </button>
37        <button onClick={() => togglePin("name")}>
38          {pinnedColumns.includes("name") ? "Unpin" : "Pin"} Name
39        </button>
40      </div>
41      <SimpleTable defaultHeaders={headers} rows={data} />
42    </div>
43  );
44}