Skip to main content

Adding a context menu

Adding the default context menu​

To add the default context menu to the Grid, you need to import the ContextMenu component to the page (from the wx-react-grid package), wrap the Grid tag inside the ContextMenu tag and use init to get access to the Grid api.

Example:

export default function App() {
  const api = useRef(null);

  function init(apiRef) {
    api.current = apiRef;
  }

  return (
    <ContextMenu api={api.current}>
      <Grid data={data} columns={columns} init={init} />
    </ContextMenu>
  );
}
import { Grid, ContextMenu } from "wx-react-grid";
import { getData } from "./common/data";

Adding a header menu​

The header context menu allows hiding/showing the columns by clicking their names in this menu.

To add the default context menu for all column headers, you need to import the HeaderMenu component to the page (from the wx-react-grid package), wrap the Grid tag inside the HeaderMenu tag and use init to get access to the table api.

Example:

const { data, columns } = getData();

export default function App() {
    const api = useRef(null);

    return (
        <HeaderMenu api={api.current}>
            <Grid data={data} columns={columns} init={init} api={api}/>
        </HeaderMenu>
    );
}

To add the header context menu for specific columns, import the HeaderMenu component to the page (from the wx-react-grid package), wrap the Grid tag inside the HeaderMenu tag and use init to get access to the table api, and add the columns object with the required columns names to the HeaderMenu tag.

import { getData } from "./common/data";
import { Grid, HeaderMenu } from "wx-react-grid";

const { data, columns } = getData();

export default function App() {
    const api = useRef(null);

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

Related articles: How to access Grid API