Overview

The ColumnPicker component provides a user interface for selecting visible columns and reordering them within a data grid or table. It utilizes a popover triggered by a button, supports drag-and-drop reordering, and can persist the user's configuration in localStorage.

Import

import ColumnPicker from "@components/column-picker/ColumnPicker";

Usage Example

import React from "react";
import ColumnPicker from "./ColumnPicker";

const ColumnPickerDemo = () => {
  const columnsInitialDef = [
    {
      field: "col1",
      headerName: "Column 1",
    },
    {
      field: "col2",
      headerName: "Column 2",
    },
    {
      field: "col3",
      headerName: "Column 3",
    },
    {
      field: "col4",
      headerName: "Column 4",
    },
    {
      field: "col5",
      headerName: "Column 5",
    },
  ];

  const onColumnsChangeHandler = (updatedColumns) => {
    console.log("Updated Columns:", updatedColumns);
    // implement your logic here
  };

  const onDataBoundHandler = (savedColumns) => {
    console.log("Saved Columns:", savedColumns);
    // implement your logic here
  };

  const columnPickerData = columnsInitialDef.map((column) => ({
    id: column.field,
    title: column.headerName,
    isVisible: true,
  }));

  return (
    <div className="d-flex align-items-center justify-content-center">
      <ColumnPicker
        columns={columnPickerData}
        onColumnsChange={onColumnsChangeHandler}
        onDataBound={onDataBoundHandler}
        cacheKey="column-picker-demo"
      />
    </div>
  );
};

export default ColumnPickerDemo;

Result

Props

Prop Name	Type	Description
columns	Array<ColumnPickerData>	An array of objects defining the columns for the picker. Each object must include id, title, and isVisible properties, conforming to the ColumnPickerData interface.
onColumnsChange	(updatedColumns: Array<ColumnPickerData>) => void	A callback function triggered when the user configures columns (e.g., clicks the configure button). It provides an array of updated ColumnPickerData objects reflecting the user's changes (visibility and order). See usage example for structure.
onDataBound	(savedColumns: Array<ColumnPickerData>) => void	A callback function executed upon component initialization, after loading column configurations from localStorage. It receives an array of ColumnPickerData objects representing the saved column settings (visibility and order), merged with the original column definitions. See usage example for structure.
cacheKey	{ prefix: string, [key: string]: any } | string | null	A unique identifier for storing and retrieving column configurations in localStorage. It can be a string or an object with a prefix attribute. If an object is given, the final key is built using the prefix and the string representation of the rest of the attributes (e.g., prefix:attr1:attr2...). If a string is provided, it's used directly as the key. If omitted, column configuration will not be saved.

Important Notes

To ensure proper management of column configurations in localStorage, please add your cache key or your cache key prefix to the cacheKeys.js file located under src/components/column-picker/cache/cacheKey.js.