Column Menu

The column menu is a popup menu that appears when you click the menu button in the column header. It allows you to perform column-related actions, such as sorting, filtering, hiding, locking, and more.

Column Menu Options

The column menu is enabled by default. To disable it, set the enableColumnMenu prop to false on the GridOptions interface.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ enableColumnMenu: false, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        enableColumnMenu: false,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Column Menu Actions

The column menu has the following actions:

• Lock Left
• Lock Right
• Unlock
• Sort Ascending
• Sort Descending
• Clear Sort
• Clear Filter
• Hide
• Fit to Content
• Fit to Content (Include Header)
• Fit to Content (All Columns)
• Fit to Content (All Columns, Include Header)

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Column Menu Customization

You can customize the column menu by passing a columnMenuOptions prop to the GridOptions interface. Below is the interface for the columnMenuOptions prop:

export interface ColumnMenuOptions {
  /**
   * The renderer to use for the column menu. The default is here:
   * https://github.com/flexicious/react-data-grid/tree/master/apps/dashboard/src/app/reference/react/columnmenu/ColumnMenuRenderer.tsx
   */
  columnMenuRenderer?: (node: RendererProps) => unknown;
  /**
   * Allows you to control the items in the column menu.
   */
  columnMenuItems?: (
    node: VirtualTreeNode,
    currentItems: (ColumnMenuItem | null)[]
  ) => (ColumnMenuItem | null)[];
}

Lets say you want to remove the Fit to Content and Fit to Content (Include Header) actions from the column menu. You can do this by passing a columnMenuItems prop to the GridOptions interface.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, columnMenuOptions: { columnMenuItems: (node, currentItems) => { return currentItems.filter((item) => { if (!item) return true; return ( item.label !== "Fit to Content" && item.label !== "Fit to Content (Include Header)" ); }); }, }, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        columnMenuOptions: {
          columnMenuItems: (node, currentItems) => {
            return currentItems.filter((item) => {
              if (!item) return true;
              return (
                item.label !== "Fit to Content" &&
                item.label !== "Fit to Content (Include Header)"
              );
            });
          },
        },
      }}
    />
  );
}

Result

Loading...

Column Menu Custom Actions

You can add custom actions to the column menu by passing a columnMenuItems prop to the GridOptions interface. Below is the interface for the ColumnMenuItem:

/***
 * An item in the column menu. This is the menu that appears when the user clicks on the column menu button.
 * Please see https://flexicious.github.io/react-data-grid/?example=Column_Menu for an example, and
 * https://github.com/flexicious/react-data-grid/tree/master/apps/dashboard/src/app/examples/column-menu.tsx for the code.
 **/
export interface ColumnMenuItem {
  /**
   * The class name to use for the menu item. This is used to style the menu item.
   */
  className: string;
  /**
   * The label to use for the menu item.
   */
  label: string;
  /***
   * The callback to call when the user clicks on the menu item.
   */
  onClick: (evt?: any) => void;
}

Lets say you want to add a custom action to the column menu. You can do this by passing a columnMenuItems prop to the GridOptions interface.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, columnMenuOptions: { columnMenuItems: (node, currentItems) => { return [ ...currentItems, { className: "custom-action", label: "Custom Action", onClick: () => { alert("Custom Action Clicked"); }, }, ]; }, }, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        columnMenuOptions: {
          columnMenuItems: (node, currentItems) => {
            return [
              ...currentItems,
              {
                className: "custom-action",
                label: "Custom Action",
                onClick: () => {
                  alert("Custom Action Clicked");
                },
              },
            ];
          },
        },
      }}
    />
  );
}

Result

Loading...

Column Menu Custom Renderer

Finally, you can completely customize the column menu by passing a columnMenuRenderer prop to the GridOptions interface. here is what this can look like:

columnMenuOptions: {
    columnMenuRenderer: (props: RendererProps) => <YourCustomComponent {...props} />
},

Here is an example of a custom column menu:

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, columnMenuOptions: { columnMenuRenderer: (props /*: RendererProps*/) => { const node = props.node; const divRef = useRef(/*<HTMLDivElement>*/ null); const [popupVisible, setPopupVisible] = useState(false); const [rectangle, setRectangle] = useState /*<Box>*/(); const api = getApi(node); const customItems = [ { label: "Custom Action", className: "custom-action", onClick: () => { alert("Custom Action Clicked"); }, }, null, { label: "Custom Action 2", className: "custom-action", onClick: () => { alert("Custom Action 2 Clicked"); }, }, null, { label: "Custom Action 3", className: "custom-action", onClick: () => { alert("Custom Action 3 Clicked"); }, }, { label: "Custom Action 4", className: "custom-action", onClick: () => { alert("Custom Action 4 Clicked"); }, }, ]; return ( <> <div ref={divRef}> <PopupButton node={node} setRectangle={setRectangle} setPopupVisible={setPopupVisible} popupVisible={popupVisible} popupWidth={300} popupHeight={200} useMouseXY className="ezgrid-dg-header-hamburger" boundingRect={ divRef.current && divRef.current.getBoundingClientRect() } /> </div> {popupVisible && ( <Popup api={api} rectangle={rectangle} setPopupVisible={setPopupVisible} > <div className="ezgrid-dg-header-hamburger-menu"> {customItems.map((x, i) => { const menuItem = x; return x ? ( <div key={i}> <div className={gridCSSPrefix(menuItem.className)} onClick={menuItem.onClick} > {menuItem.label} </div> </div> ) : ( <div key={i} style={{ borderBottom: "solid 2px red" }} /> ); })} </div> </Popup> )} </> ); }, }, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        columnMenuOptions: {
          columnMenuRenderer: (props /*: RendererProps*/) => {
            const node = props.node;
            const divRef = useRef(/*<HTMLDivElement>*/ null);
            const [popupVisible, setPopupVisible] = useState(false);
            const [rectangle, setRectangle] = useState /*<Box>*/();
            const api = getApi(node);
            const customItems = [
              {
                label: "Custom Action",
                className: "custom-action",
                onClick: () => {
                  alert("Custom Action Clicked");
                },
              },
              null,
              {
                label: "Custom Action 2",
                className: "custom-action",
                onClick: () => {
                  alert("Custom Action 2 Clicked");
                },
              },
              null,
              {
                label: "Custom Action 3",
                className: "custom-action",
                onClick: () => {
                  alert("Custom Action 3 Clicked");
                },
              },
              {
                label: "Custom Action 4",
                className: "custom-action",
                onClick: () => {
                  alert("Custom Action 4 Clicked");
                },
              },
            ];
            return (
              <>
                <div ref={divRef}>
                  <PopupButton
                    node={node}
                    setRectangle={setRectangle}
                    setPopupVisible={setPopupVisible}
                    popupVisible={popupVisible}
                    popupWidth={300}
                    popupHeight={200}
                    useMouseXY
                    className="ezgrid-dg-header-hamburger"
                    boundingRect={
                      divRef.current && divRef.current.getBoundingClientRect()
                    }
                  />
                </div>
                {popupVisible && (
                  <Popup
                    api={api}
                    rectangle={rectangle}
                    setPopupVisible={setPopupVisible}
                  >
                    <div className="ezgrid-dg-header-hamburger-menu">
                      {customItems.map((x, i) => {
                        const menuItem = x;
                        return x ? (
                          <div key={i}>
                            <div
                              className={gridCSSPrefix(menuItem.className)}
                              onClick={menuItem.onClick}
                            >
                              {menuItem.label}
                            </div>
                          </div>
                        ) : (
                          <div
                            key={i}
                            style={{ borderBottom: "solid 2px red" }}
                          />
                        );
                      })}
                    </div>
                  </Popup>
                )}
              </>
            );
          },
        },
      }}
    />
  );
}

Result

Loading...

CSS Classes for Column Menu

The following CSS classes are used for the column menu, and can be used to style the column menu.

.ezgrid-dg-header-hamburger-menu {
    display: block;
    position: relative;
    width: 100%
}

.ezgrid-dg-context-menu>div>div,
.ezgrid-dg-header-hamburger-menu>div>div {
    display: block;
    padding: 10px 8px;
    text-decoration: none;
    color: #000;
    background-color: #ddd;
    border-bottom: 1px solid #ccc
}

.ezgrid-dg-context-menu>div>div {
    display: flex;
    gap: 15px;
    align-items: center
}


.ezgrid-dg-context-menu>div>div:hover,
.ezgrid-dg-header-hamburger-menu>div>div:hover {
    background-color: #eee
}

And below are the classes for the items in the column menu:

.ezgrid-dg-lock-left-icon:before,
.ezgrid-dg-lock-right-icon:before {
    content: "←";
    padding-right: 5px;
    transform: rotate(270deg)
}

.ezgrid-dg-lock-right-icon:before {
    content: "→"
}

.ezgrid-dg-pin-none-icon:before {
    content: "×";
    padding-right: 5px;
    transform: translate(-50%, -50%) rotate(45deg)
}

.ezgrid-dg-sort-ascending-icon:before,
.ezgrid-dg-sort-descending-icon:before {
    content: "↑";
    padding-right: 5px;
    transform: translate(-50%, -50%) rotate(45deg)
}

.ezgrid-dg-sort-descending-icon:before {
    content: "↓"
}

.ezgrid-dg-clear-filter-icon:before,
.ezgrid-dg-run-filter-icon:before,
.ezgrid-dg-sort-none-icon:before {
    content: "×";
    padding-right: 5px;
    transform: translate(-50%, -50%) rotate(45deg)
}

.ezgrid-dg-run-filter-icon:before {
    content: "→"
}

.ezgrid-dg-fit-all-width-icon:before,
.ezgrid-dg-fit-width-icon:before {
    content: "↔";
    padding-right: 5px;
    transform: translate(-50%, -50%) rotate(45deg)
}

Customizing CSS

All of these can be customized to fit your needs, just make sure you create a new file and import it after the grid CSS file, and make all your changes in the new file. This way, when you update the grid, your changes will not be overwritten.