Footers

In the GridOptions interface, the below properties are available to customize the footer.

• enableFooters
• footerRowHeight

In the ColumnOptions interface, the below properties are available to customize the footer.

• footerOptions

Below is the list of properties available in the HeaderOptions interface.

export interface FooterOptions {
  footerOperation?: FooterOperation;
  footerOperationPrecision?: number;
  footerLabel?: string;
  footerLabelFunction?: (
    column: ColumnOptions,
    dataProvider: unknown[] | undefined
  ) => string;

  footerRenderer?: (
    props: RendererProps
  ) => unknown;
}

The documentation for the above properties can be found here

Adding a footer

Similar to the header, the footer can be added by setting the enableFooters property to true in the GridOptions interface. Once you set the enableFooters property to true, the footer will be displayed for all the columns. The footer will be displayed at the bottom of the grid by default.

Live Editor

function App(){ const columns = [ createColumn("employeeId", "string", "Id"), createColumn("isActive", "boolean", "Active"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("annualSalary", "currency", "Salary"), createColumn("hireDate", "date", "Hire Date"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFooters: true, }} /> ); }

function App(){
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("isActive", "boolean", "Active"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("annualSalary", "currency", "Salary"),
    createColumn("hireDate", "date", "Hire Date"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFooters: true,
      }}
    />
  );
}

Result

Loading...

Now that we have enabled the footers, let's customize the footer for each column.

Customizing the footer

The footer can be customized by setting the footerOptions property in the ColumnOptions interface. The footerOptions property is of type FooterOptions. The documentation for the FooterOptions interface can be found here

Let's customize the footer for the annualSalary column. We will set the footerOperation property to "avg" and the footerLabel property to "Avg: ". The footerOperation property can be set to "sum", "avg", "min", "max" or "count". The footerLabel property can be set to a string or a function. If the footerLabel property is set to a function, the function will be called with the column and the dataProvider as arguments. The function should return a string.

Live Editor

function App(){ const columns = [ { ...createColumn("annualSalary", "currency", "Salary"), footerOptions: { footerOperation: "avg", footerLabel: "Avg: " } }, createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("hireDate", "date", "Hire Date"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), createColumn("isActive", "boolean", "Active"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFooters: true, }} /> ); }

function App(){
  const columns = [
    {
        ...createColumn("annualSalary", "currency", "Salary"),
        footerOptions: {
            footerOperation: "avg",
            footerLabel: "Avg: "
        }      

    },
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("hireDate", "date", "Hire Date"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
    createColumn("isActive", "boolean", "Active"),
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFooters: true,
      }}
    />
  );
}

Result

Loading...

Let's customize the footer for the remaining columns, let's set Id to sum, Territory to count, First Name to min, Last Name to max, Hire Date to max, and Salary to sum.

Live Editor

function App(){ const columns = [ { ...createColumn("employeeId", "string", "Id"), footerOptions: { footerOperation: "sum", footerLabel: "Sum: " } }, { ...createColumn("stateCode", "string", "Territory"), footerOptions: { footerOperation: "count", footerLabel: "Count: " } }, { ...createColumn("firstName", "string", "First Name"), footerOptions: { footerOperation: "min", footerLabel: "Min: " } }, { ...createColumn("lastName", "string", "Last Name"), footerOptions: { footerOperation: "max", footerLabel: "Max: " } }, { ...createColumn("annualSalary", "currency", "Salary"), footerOptions: { footerOperation: "sum", footerLabel: "Sum: " } }, { ...createColumn("hireDate", "date", "Hire Date"), footerOptions: { footerOperation: "max", footerLabel: "Max: " } }, createColumn("isActive", "boolean", "Active"), createColumn("department", "string", "Department"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFooters: true, }} /> ); }

function App(){
  const columns = [
    {
        ...createColumn("employeeId", "string", "Id"),
        footerOptions: {
            footerOperation: "sum",
            footerLabel: "Sum: "
        }      

    },
    {
        ...createColumn("stateCode", "string", "Territory"),
        footerOptions: {
            footerOperation: "count",
            footerLabel: "Count: "
        }      

    },
    {
        ...createColumn("firstName", "string", "First Name"),
        footerOptions: {
            footerOperation: "min",
            footerLabel: "Min: "
        }      

    },
    {
        ...createColumn("lastName", "string", "Last Name"),
        footerOptions: {
            footerOperation: "max",
            footerLabel: "Max: "
        }      

    },
    {
        ...createColumn("annualSalary", "currency", "Salary"),
        footerOptions: {
            footerOperation: "sum",
            footerLabel: "Sum: "
        }      

    },
    {
        ...createColumn("hireDate", "date", "Hire Date"),
        footerOptions: {
            footerOperation: "max",
            footerLabel: "Max: "
        }      

    },
    createColumn("isActive", "boolean", "Active"),
    createColumn("department", "string", "Department"),
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFooters: true,
      }}
    />
  );
}

Result

Loading...

Using the footerLabelFunction property

The footerLabelFunction property can be set to a function. The function will be called with the column and the dataProvider as arguments. The function should return a string.

Let's set the footerLabelFunction property for the annualSalary column. The footerLabelFunction property will return the string " Median: {MedianValue}".

Live Editor

function App(){ const columns = [ { ...createColumn("annualSalary", "currency", "Salary"), footerOptions: { footerOperation: "avg", footerLabelFunction: (column, dp) => { const mid = (dp||[]).sort((a, b) => a.annualSalary - b.annualSalary)[Math.floor(dp.length / 2)]; const medianValue = mid.annualSalary; return `Median: ${medianValue}`; } } }, createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("hireDate", "date", "Hire Date"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), createColumn("isActive", "boolean", "Active"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFooters: true, }} /> ); }

    function App(){
      const columns = [
        {
            ...createColumn("annualSalary", "currency", "Salary"),
            footerOptions: {
                footerOperation: "avg",
                footerLabelFunction: (column, dp) => {
                    const mid = (dp||[]).sort((a, b) => a.annualSalary - b.annualSalary)[Math.floor(dp.length / 2)];
                    const medianValue = mid.annualSalary;
                    return `Median: ${medianValue}`;
                }
            }      

        },
        createColumn("employeeId", "string", "Id"),
        createColumn("firstName", "string", "First Name"),
        createColumn("lastName", "string", "Last Name"),
        createColumn("hireDate", "date", "Hire Date"),
        createColumn("stateCode", "string", "Territory"),
        createColumn("department", "string", "Department"),
        createColumn("isActive", "boolean", "Active"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
            enableFooters: true,
          }}
        />
      );
    }

Result

Loading...

Now that you are familiar with footerLabel and footerLabelFunction, let's take a look at the footerRenderer property.

Using the footerRenderer property

The footerRenderer property can be set to a function. The function will be called with the column and the dataProvider as arguments. The function should return a ReactNode.

Let's set the footerRenderer property for the annualSalary column. The footerRenderer property will return the string " Median: {MedianValue}".

Live Editor

function App(){ const columns = [ { ...createColumn("annualSalary", "currency", "Salary"), footerOptions: { footerOperation: "avg", footerRenderer: ({node}) => { const dp = node.gridOptions.dataProvider; const mid = (dp||[]).sort((a, b) => a.annualSalary - b.annualSalary)[Math.floor(dp.length / 2)]; const medianValue = mid.annualSalary; return <div><i><u>Median: ${medianValue}</u></i></div>; } } }, createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("hireDate", "date", "Hire Date"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), createColumn("isActive", "boolean", "Active"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFooters: true, }} /> ); }

    function App(){
      const columns = [
        {
            ...createColumn("annualSalary", "currency", "Salary"),
            footerOptions: {
                footerOperation: "avg",
                footerRenderer: ({node}) => {
                    const dp = node.gridOptions.dataProvider;
                    const mid = (dp||[]).sort((a, b) => a.annualSalary - b.annualSalary)[Math.floor(dp.length / 2)];
                    const medianValue = mid.annualSalary;
                    return <div><i><u>Median: ${medianValue}</u></i></div>;
                }
            }      

        },
        createColumn("employeeId", "string", "Id"),
        createColumn("firstName", "string", "First Name"),
        createColumn("lastName", "string", "Last Name"),
        createColumn("hireDate", "date", "Hire Date"),
        createColumn("stateCode", "string", "Territory"),
        createColumn("department", "string", "Department"),
        createColumn("isActive", "boolean", "Active"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
            enableFooters: true,
          }}
        />
      );
    }

Result

Loading...

tip

There are additional examples of using the footerRenderer property in the Footer Options example.