Toolbar

The toolbar is the main navigation bar of the datagrid. By default, it is divided into two sections: the left section and the right section. The left section contains the following buttons:

• Settings
• Save Settings
• Manage Settings
• Export PDF
• Export Excel
• Filter (If the filter is enabled)
• Filter Builder (If the filter builder is enabled)
• Expand / Collapse All/One
• Pagination
• Selection
• Drop Zone (If grouping is enabled)

The right section contains the following items

• Global Filter
• Global Search

In addition to the default buttons, you can add your own buttons to the toolbar. This is done by using the leftToolbarRenderer and rightToolbarRenderer properties of the toolbar options interface.

The toolbar is nothing but a div with a flex box layout with two sections separated by "space-between"

If you look at the toolbar options interface, you can map the buttons above to flags in the toolbar options interface you can use to control their visibility.

  export interface ToolbarOptions {
  toolbarRenderer?: (node: RendererProps) => unknown;
  enableGlobalSearch?: boolean;
  enableFilterchips?: boolean;
  filterBuilderRenderer?: (node: RendererProps) => unknown;
  enableQuickFind?: boolean;
  enablePdf?: boolean;
  enableExcel?: boolean;
  enableExpander?: boolean;
  enableGroupingDropzone?: boolean;
  enableSettings?: boolean;
  changeDelay?: number;
  leftToolbarRenderer?: (node: RendererProps) => unknown;
  rightToolbarRenderer?: (node: RendererProps) => unknown;
}

Toolbar Source Code

You can find the source code for the toolbar and all its components here

Toolbar Options

Lets take the example from before, and customize the toolbar to not show the global filter or the quick find. We will also add a button to the toolbar that will show a popup when clicked.

Live Editor

function App() { const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, toolbarOptions:{ enableGlobalSearch:false, enableQuickFind:false, } }} /> ); }

function App() {
      const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            behaviors:[createFilterBehavior({})],
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
            toolbarOptions:{
              enableGlobalSearch:false,
              enableQuickFind:false,
            }
          }}
        />
      );
}

Result

Loading...

As you can see, we have set the enableGlobalSearch and enableQuickFind flags to false. This will hide the global filter and the quick find. The global filter requires both the flag as well as the filter behavior to be enabled, but this example shows you how to hide the global filter even if the filter behavior is enabled.

Customizing the Toolbar

The toolbar is a div with a flex box layout. So you can add your own buttons to the toolbar by using the leftToolbarRenderer and rightToolbarRenderer properties of the toolbar options interface. Lets add a button to the toolbar that will show a popup when clicked.

Live Editor

function App() { const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, toolbarOptions:{ leftToolbarRenderer: ({node}) => { return ( <div> <button onClick={() => { alert("Hello World"); }} > Hello World </button> </div> ); }, } }} /> ); }

function App() {
      const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            behaviors:[createFilterBehavior({})],
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
            toolbarOptions:{
              leftToolbarRenderer: ({node}) => {
                return (
                  <div>
                    <button
                      onClick={() => {
                        alert("Hello World");
                      }}
                    >
                      Hello World
                    </button>
                  </div>
                );
              },
            }
          }}
        />
      );
}

Result

Loading...

As you can see, we have added a button to the toolbar. The leftToolbarRenderer property is a function that takes a node as a parameter. The node is an object of type VirtualTreeNode, you can see the documentation for it here. But in a nutshell, this will give you access to all the properties of the grid.

You can use the same approach to add buttons to the right section of the toolbar.

Live Editor

function App() { const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, toolbarOptions:{ rightToolbarRenderer: ({node}) => { return ( <div> <button onClick={() => { alert("Hello World"); }} > Hello World </button> </div> ); }, } }} /> ); }

function App() {
      const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            behaviors:[createFilterBehavior({})],
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
            toolbarOptions:{
              rightToolbarRenderer: ({node}) => {
                return (
                  <div>
                    <button
                      onClick={() => {
                        alert("Hello World");
                      }}
                    >
                      Hello World
                    </button>
                  </div>
                );
              },
            }
          }}
        />
      );
}

Result

Loading...

Anatomy of the Toolbar

As we mentioned earlier, the toolbar is a div with a flex box layout. The toolbar is divided into two sections, the left section and the right section. Below is the code for the toolbar.

const Toolbar: FC<RendererProps> = ({ node }) => {
   const { box, styles } = node;
   return <div className={`${node.classNames} ${GRID_CONSTANTS.CSS_PREFIX}toolbar ${node.gridOptions.isLoading ? GRID_CONSTANTS.CSS_PREFIX + "disabled" : ""}`} style={{ ...styles, ...box }} >
       <div style={{ paddingLeft: "5px" }}>
           <ToolbarLeft node={node} />
       </div>
       <div style={{ paddingRight: "5px" }}>
           <ToolbarRight node={node} />
       </div>
   </div >;
};

Toolbar Left is below

export const ToolbarLeft: FC<RendererProps> = ({ node }) => {
    const options = node.gridOptions.toolbarOptions;

    return <div className="ezgrid-dg-toolbar-section">
        {options?.enableSettings !== false && <SettingsMenu node={node} />}
        {options?.enableExpander !== false && <Expander node={node} />}
        <Exporter node={node} />
        <Paginator node={node} />
        <Selection node={node} />
        <EditMenu node={node} />

        {options?.filterBuilderRenderer && (options.filterBuilderRenderer({ node }) as ReactNode)}


        {options?.enableGroupingDropzone !== false && <Grouping node={node} />}
        {options?.enableFilterchips !== false && <FilterChips node={node} />}
        <>{options?.leftToolbarRenderer && options.leftToolbarRenderer({ node })}</>
    </div>;
};

Toolbar Right is a bit more involved, so we will just link to the code here

And the code for the consituent parts of the toolbar are available here.

All of these sections are pretty minimal and you can customize them to your liking. You can choose to add your own sections like we did with the leftToolbarRenderer and rightToolbarRenderer, or you can write your own toolbar from scratch.

Custom Toolbar

Lets demonstrate how you can make a completely custom toolbar. We will add a button to the toolbar that will show a popup when clicked.

Live Editor

function App() { const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, toolbarOptions:{ toolbarRenderer: ({node}) => { return ( <div> <button onClick={() => { alert("Hello World"); }} > Hello World </button> </div> ); }, } }} /> ); }

function App() {
      const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            behaviors:[createFilterBehavior({})],
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
            toolbarOptions:{
              toolbarRenderer: ({node}) => {
                return (
                  <div>
                    <button
                      onClick={() => {
                        alert("Hello World");
                      }}
                    >
                      Hello World
                    </button>
                  </div>
                );
              },
            }
          }}
        />
      );
}

Result

Loading...

Positioning the Toolbar

The toolbar is positioned at the top of the grid by default. You can change this by using the displayOrder property.

Live Editor

function App() { const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, displayOrder: [GridSection.Header, GridSection.Filter, GridSection.Body,GridSection.Footer, GridSection.Toolbar], }} /> ); }

function App() {
      const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
            displayOrder: [GridSection.Header, GridSection.Filter, GridSection.Body,GridSection.Footer, GridSection.Toolbar],
          }}
        />
      );
}

Result

Loading...

Externalizing the Toolbar

The toolbar is a part of the grid, but its really a composite of many parts. You use all of the parts of the toolbar, but you can also use them individually. For example, lets take settings menu and put it in a different part of the page.

Live Editor

function App() { const createNode = (gridOptions/*: GridOptions*/) => { return { gridOptions, key: "Expander", type: TreeNodeType.Renderer, box: {} } }; const apiRef = useRef/*<ApiContext | null>*/(null); const [, setToggle] = useState(0); const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), ]; return ( <div style={{display:"flex", flexDirection:"column"}}> <div style={{ background: "aqua", borderRadius: 5, padding: 5 }}> Settings: {apiRef.current && apiRef.current.context.gridOptions && <SettingsMenu node={createNode(apiRef.current.context.gridOptions)} />} </div> <div style={{ height: "400px", width: "100%" }}> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ enableToolbar: false, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, eventBus: { onApiContextReady: (ctx) => { apiRef.current = ctx; //trigger render for our external toolbar setToggle(Math.random()); }, }, }} /> </div> </div> ); }

function App() {
  const createNode = (gridOptions/*: GridOptions*/) => {
  return {
    gridOptions,
    key: "Expander",
    type: TreeNodeType.Renderer,
    box: {}
}
};

    const apiRef = useRef/*<ApiContext | null>*/(null);
    const [, setToggle] = useState(0);

    const columns = [
        createColumn("firstName", "string", "First Name"),
        createColumn("lastName", "string", "Last Name"),
        createColumn("stateCode", "string", "Territory"),
        createColumn("department", "string", "Department"),
    ];

    return (
        <div style={{display:"flex", flexDirection:"column"}}>

            <div style={{ background: "aqua", borderRadius: 5, padding: 5 }}>
                    Settings:
                   {apiRef.current && apiRef.current.context.gridOptions &&
                <SettingsMenu node={createNode(apiRef.current.context.gridOptions)} />}
            </div>
            <div style={{ height: "400px", width: "100%" }}>
                <ReactDataGrid style={{ height: "400px", width: "100%" }}
                    gridOptions={{
                        enableToolbar: false,
                        dataProvider: Employee.getAllEmployees(),
                        uniqueIdentifierOptions: {
                            useField: "employeeId",
                        },
                        columns,
                        eventBus: {
                            onApiContextReady: (ctx) => {
                                apiRef.current = ctx;
                                //trigger render for our external toolbar
                                setToggle(Math.random());
                            },
                        },
                    }}
                    
                />
            </div>
        </div>
    );
}

Result

Loading...

tip

A full running example of externalizing all of the toolbar components can be found here

tip

We introduce a new concept in the example above, the ApiContext. The ApiContext is a way to get access to the grid's internal state. You can use this to get access to the grid's options, or to trigger actions on the grid. We will cover this in more detail in the next section.

Armed with this knowledge, and with the help of the linked source code for the entire toolbar, you should be able to customize the toolbar to your liking, but if you need any help, please reach out to us!