Configuration Options - Footers

Parent Previous Next

In the previous section, we saw how to enable a basic set of filters. In this section, we will look into another nice feature, the footers.


Footers by default are drawn below the grid. You can customize this, by using the displayOrder property. In this section, we will add footer to the grid we built. All you have to do, is to specify a footerOperation. First, let's look at the markup required to enable simple footerOperation for the grid:


All you have to do is to add the text in red to the markup from above:

configuration

       <ReactDataGridColumn dataField="id" headerText="ID"  filterControl="TextInput" filterOperation="Contains" footerOperation="sum"/>

       <ReactDataGridColumn dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" footerOperation="count"/>


Once you do this, you should see the following UI:



Notice the footers are automatically created and shown for you. The footer operation by default can be one of a number of built in operations. From the documentation at:

http://www.reactdatagrid.com/docs/class/js/flexgrid/grids/FlexDataGridColumn.js~FlexDataGridColumn.html#instance-member-footerOperation


The operation to apply to the footer. One of the following values:



You can specify custom footer labels as well. For example, modifying the markup a little bit gives us this:



And here is the markup we used:


       <ReactDataGridColumn dataField="id" headerText="ID"  filterControl="TextInput" filterOperation="Contains" footerOperation="sum"

           footerOperation="sum" footerOperationPrecision={2}/>

       <ReactDataGridColumn dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" footerOperation="count"

         footerOperation="count" footerOperationPrecision={3}/>



Finally, it is possible to provide your own footerLabelFunction as well.


class Example extends React.Component {

   customFooterFunction() {

       return <div> Look Mommy, custom footer!</div>;

   }

   render() {

       const grid = <ReactDataGrid horizontalScrollPolicy={"off"} width={"100%"}

           enablePrint enablePreferencePersistence enableExport forcePagerRow pageSize="50" enableFilters enableFooters

           editable dataProvider={donuts}>

           <ReactDataGridColumn dataField="id" headerText="ID" filterControl="TextInput" filterOperation="Contains" footerOperation="sum"

               footerOperation="sum" footerOperationPrecision={2} />

           <ReactDataGridColumn dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" footerOperation="count"

               footerLabelFunction={this.customFooterFunction} />

       </ReactDataGrid>;



       return grid;

   }

}


ReactDOM.render(

   <Example />,

   document.getElementById('app')

);

                                   

You should see:


Here, we covered an important concept - passing functions into configurations. The same concept is used to add event listeners, provide custom renderers, etc, as we will see in future examples. We basically expose a namespaced function, and pass it into the configuration so it can be navigated to. The grid then keeps a pointer to it and uses it for generating custom HTML for the footer. Same concept is used in labelFunction with the regular cells, as we will see in future examples.


For those of you who want the source for the complete running example above, here it is, in all its glory!


<!DOCTYPE html>

<!--PLEASE ENSURE YOU READ THE ACCOMPANYING README.TXT FOR DETAILS-->

<html lang="en">


<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>React DataGrid Example</title>

</head>


<body>

 <div id="app"></div>

 <script src="../../lib/reactdatagrid.js"></script>

 <script src="../../data.js"></script>

 <script type="text/babel">


const { ReactDataGrid, ReactDataGridColumn} = flexiciousNmsp;


class Example extends React.Component {

   customFooterFunction() {

       return <div> Look Mommy, custom footer!</div>;

   }

   render() {

       const grid = <ReactDataGrid horizontalScrollPolicy={"off"} width={"100%"}

           enablePrint enablePreferencePersistence enableExport forcePagerRow pageSize="50" enableFilters enableFooters

           editable dataProvider={donuts}>

           <ReactDataGridColumn dataField="id" headerText="ID" filterControl="TextInput" filterOperation="Contains" footerOperation="sum"

               footerOperation="sum" footerOperationPrecision={2} />

           <ReactDataGridColumn dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" footerOperation="count"

               footerLabelFunction={this.customFooterFunction} />

       </ReactDataGrid>;



       return grid;

   }

}


ReactDOM.render(

   <Example />,

   document.getElementById('app')

);


 </script>

</body>


</html>