Inner Level Renderers

Inner level renderers are a variation of Nested Grids, but instead of rendering the next levels as a child grid, they are rendered as a child component. This is useful when you want to render a different type of component for each level. For example, you may want to render a chart or a table at the inner level, you can do so.

Basic Example

Live Editor

function App() { const columns = [ { ...createColumn("employeeId", "string", "Id"), enableHierarchy: true, }, createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("annualSalary", "currency", "Annual Salary"), ]; return ( <ReactDataGrid style={{ height: "600px", width: "100%", backgroundColor: "white" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, eventBus: { onApiContextReady: (ctx) => { ctx.api.expandAll(); }, }, columns, enableFilters: false, nextLevel: { nextLevelRendererOptions: { nextLevelRendererHeightFunction: () => 200, nextLevelRenderer: (props) => { const employee = props.node.rowPosition.data; return ( <div style={{ padding: "10px", backgroundColor: "lightgray" }}> <h3>Inner Level Renderer</h3> <p> This is the inner level renderer for the employee{" "} {employee.firstName} {employee.lastName}. Employee ID:{" "} {employee.employeeId} has been working for the company since{" "} {formatDate(employee.hireDate)}. They have a salary of{" "} {formatCurrency(employee.annualSalary)}. They are a very good employee! We can render anything here, a chart, a table, anything we want! </p> </div> ); }, }, }, }} /> ); }

function App() {
  const columns = [
    {
      ...createColumn("employeeId", "string", "Id"),
      enableHierarchy: true,
    },
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("annualSalary", "currency", "Annual Salary"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "600px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        eventBus: {
          onApiContextReady: (ctx) => {
            ctx.api.expandAll();
          },
        },
        columns,
        enableFilters: false,
        nextLevel: {
          nextLevelRendererOptions: {
            nextLevelRendererHeightFunction: () => 200,
            nextLevelRenderer: (props) => {
              const employee = props.node.rowPosition.data;
              return (
                <div style={{ padding: "10px", backgroundColor: "lightgray" }}>
                  <h3>Inner Level Renderer</h3>
                  <p>
                    This is the inner level renderer for the employee{" "}
                    {employee.firstName} {employee.lastName}. Employee ID:{" "}
                    {employee.employeeId} has been working for the company since{" "}
                    {formatDate(employee.hireDate)}. They have a salary of{" "}
                    {formatCurrency(employee.annualSalary)}. They are a very
                    good employee! We can render anything here, a chart, a
                    table, anything we want!
                  </p>
                </div>
              );
            },
          },
        },
      }}
    />
  );
}

Result

Loading...

Inner Level Renderers

Please note, that once you provide an inner level renderer, you can no longer provide further levels, because once the grid has rendered the inner level, it has no way of knowing what to do with the next level. So if you want to render a chart at the inner level, that would be the last level.

Left Locked Inner Level Renderers

You can have inner level with locked columns as well by providing a nextLevelRendererLeftLocked in addition to nextLevelRenderer:

Live Editor

function App() { const columns = [ { ...createColumn("employeeId", "string", "Id"), enableHierarchy: true, lockMode: LockMode.Left, }, createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("annualSalary", "currency", "Annual Salary"), ]; return ( <ReactDataGrid style={{ height: "600px", width: "100%", backgroundColor: "white" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, eventBus: { onApiContextReady: (ctx) => { ctx.api.expandAll(); }, }, columns, enableFilters: false, nextLevel: { nextLevelRendererOptions: { nextLevelRendererHeightFunction: () => 200, nextLevelRenderer: (props) => { const employee = props.node.rowPosition.data; return ( <div style={{ padding: "10px", height:"100%", backgroundColor: "lightgray" }}> <h3>Inner Level Renderer</h3> <p> This is the inner level renderer for the employee{" "} {employee.firstName} {employee.lastName}. Employee ID:{" "} {employee.employeeId} has been working for the company since{" "} {formatDate(employee.hireDate)}. They have a salary of{" "} {formatCurrency(employee.annualSalary)}. They are a very good employee! We can render anything here, a chart, a table, anything we want! </p> </div> ); }, nextLevelRendererLeftLocked: (props) => { const employee = props.node.rowPosition.data; return ( <div style={{ padding: "10px", height:"100%", backgroundColor: "lightgray" }}> <h3>Left Locked</h3> <p> {employee.firstName} {employee.lastName}. </p> </div> ); }, }, }, }} /> ); }

function App() {
  const columns = [
    {
      ...createColumn("employeeId", "string", "Id"),
      enableHierarchy: true,
      lockMode: LockMode.Left,
    },
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("annualSalary", "currency", "Annual Salary"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "600px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        eventBus: {
          onApiContextReady: (ctx) => {
            ctx.api.expandAll();
          },
        },
        columns,
        enableFilters: false,
        nextLevel: {
          nextLevelRendererOptions: {
            nextLevelRendererHeightFunction: () => 200,
            nextLevelRenderer: (props) => {
              const employee = props.node.rowPosition.data;
              return (
                <div style={{ padding: "10px", height:"100%", backgroundColor: "lightgray" }}>
                  <h3>Inner Level Renderer</h3>
                  <p>
                    This is the inner level renderer for the employee{" "}
                    {employee.firstName} {employee.lastName}. Employee ID:{" "}
                    {employee.employeeId} has been working for the company since{" "}
                    {formatDate(employee.hireDate)}. They have a salary of{" "}
                    {formatCurrency(employee.annualSalary)}. They are a very
                    good employee! We can render anything here, a chart, a
                    table, anything we want!
                  </p>
                </div>
              );
            },
            nextLevelRendererLeftLocked: (props) => {
              const employee = props.node.rowPosition.data;
              return (
                <div style={{ padding: "10px", height:"100%", backgroundColor: "lightgray" }}>
                  <h3>Left Locked</h3>
                  <p>
                    {employee.firstName} {employee.lastName}. 
                  </p>
                </div>
              );
            },
          },
        },
      }}
    />
  );
}

Result

Loading...

Grid inside Grid

You can also render a grid inside the inner level renderer.

Live Editor

function App() { const columns = [ { ...createColumn("employeeId", "string", "Id"), enableHierarchy: true, }, createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("annualSalary", "currency", "Annual Salary"), ]; return ( <ReactDataGrid style={{ height: "600px", width: "100%", backgroundColor: "white" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, eventBus: { onApiContextReady: (ctx) => { ctx.api.expandAll(); }, }, columns, enableFilters: false, nextLevel: { nextLevelRendererOptions: { nextLevelRendererHeightFunction: () => 400, nextLevelRenderer: (props) => { const employee = props.node.rowPosition.data; return ( <div style={{ padding: "10px", backgroundColor: "lightgray" }}> <h3>Grid inside Grid</h3> <ReactDataGrid style={{ height: "300px", width: "calc(100% - 20px)", backgroundColor: "white" }} gridOptions={{ horizontalScroll: HorizontalScrollMode.Off, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFilters: false, }} /> </div> ); }, }, }, }} /> ); }

function App() {
  const columns = [
    {
      ...createColumn("employeeId", "string", "Id"),
      enableHierarchy: true,
    },
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("annualSalary", "currency", "Annual Salary"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "600px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        eventBus: {
          onApiContextReady: (ctx) => {
            ctx.api.expandAll();
          },
        },
        columns,
        enableFilters: false,
        nextLevel: {
          nextLevelRendererOptions: {
            nextLevelRendererHeightFunction: () => 400,
            nextLevelRenderer: (props) => {
              const employee = props.node.rowPosition.data;
              return (
                <div style={{ padding: "10px", backgroundColor: "lightgray" }}>
                  <h3>Grid inside Grid</h3>
                  <ReactDataGrid
                    style={{ height: "300px", width: "calc(100% - 20px)", backgroundColor: "white" }}
                    gridOptions={{
                      horizontalScroll: HorizontalScrollMode.Off,
                      dataProvider: Employee.getAllEmployees(),
                      uniqueIdentifierOptions: {
                        useField: "employeeId",
                      },
                      columns,
                      enableFilters: false,
                    }}
                  />
                </div>
              );
            },
          },
        },
      }}
    />
  );
}

Result

Loading...

Grid inside Grid

One of the limitations of this approach is that you have scrollbars inside scrollbars, which is in general, not a good user experience. This is why we have built the Nested Grids feature, which allows you to render a grid inside a grid without the scrollbars inside scrollbars as you saw in the previous section. However, this seems to be a common example in the wild, so we have provided this example as well.