Skip to main content

HeaderMenu

Description​

HeaderMenu component that allows managing visibility of columns

The component allows users to hide/show columns by clicking their names in this menu.

Usage​

<HeaderMenu api={api} columns={columns} />

You can import the component from @svar-ui/react-grid.

Parameters​

  • api - the api gateway object to bind the component to the DataGrid (in React this is typically a ref created with useRef and passed to the Grid via ref)
  • columns - allows adding the menu for specific columns; an object with columns IDs where each value is set to true (to show the menu for a column) or false (hide the column menu); true is set by default

Example​

The example below shows how to add the header menu for specific columns:

import { useRef } from "react";
import { getData } from "./common/data";
import { Grid, HeaderMenu } from "@svar-ui/react-grid";

export default function Example() {
  const { data, columns } = getData();

  // create api gateway ref and pass it to both HeaderMenu and Grid
  const api = useRef(null);

  return (
    <HeaderMenu api={api} columns={{ city: true, firstName: true, id: true }}>
      <Grid data={data} columns={columns} ref={api} />
    </HeaderMenu>
  );
}

Related articles: