> For the complete documentation index, see [llms.txt](https://ghiscoding.gitbook.io/aurelia-slickgrid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/custom-footer.md).
# Custom Footer
#### Description
You can use and show the Custom Footer with 2 left/right containers and will by default display filtered item count & total count on the right side. Also if it detects that you use row selection, it will also show the row selection count on the left footer side. You can also override both left/right side texts.
**NOTE:** The Custom Footer cannot be used in combination with Pagination, you can only show 1 or the other.
#### Demo
[Demo Page](https://ghiscoding.github.io/aurelia-slickgrid-demos/#/slickgrid/example2) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/aurelia/src/examples/slickgrid/example2.ts)
#### Usage
```ts
defineGrid() {
this.columns = [ /*...*/ ];
this.gridOptions = {
// ...
showCustomFooter: true, // display some metrics in the bottom custom footer
customFooterOptions: {
// optionally display some text on the left footer container
leftFooterText: 'Grid created with Slickgrid-Universal',
hideMetrics: false,
hideTotalItemCount: false,
hideLastUpdateTimestamp: false
},
};
}
```
**CustomFooterOption Interface**
Below is the list of all options available with the Custom Footer, you can visit the [customFooterOption.interface.ts](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/customFooterOption.interface.ts) to see latest code in case the code below is not up to date.
```ts
export interface CustomFooterOption {
/** Optionally provide some text to be displayed on the left side of the footer (in the "left-footer" css class) */
leftFooterText?: string;
/** CSS class used for the left container */
leftContainerClass?: string;
/** Date format used when showing the "Last Update" timestamp in the metrics section. */
dateFormat?: string;
/** Defaults to 25, height of the Custom Footer in pixels, it could be a number (25) or a string ("25px") but it has to be in pixels. It will be used by the auto-resizer calculations. */
footerHeight?: number | string;
/**
* Defaults to false, which will hide the selected rows count on the bottom left of the footer.
* NOTE: if users defined a `leftFooterText`, then the selected rows count will NOT show up.
*/
hideRowSelectionCount?: boolean;
/** Defaults to false, do we want to hide the last update timestamp (endTime)? */
hideLastUpdateTimestamp?: boolean;
/**
* Defaults to false, do we want to hide the metrics (right section) when the footer is displayed?
* That could be used when we want to display only the left section with custom text
*/
hideMetrics?: boolean;
/** Defaults to false, do we want to hide the total item count of the entire dataset (the count exclude any filtered data) */
hideTotalItemCount?: boolean;
/** Defaults to "|", separator between the timestamp and the total count */
metricSeparator?: string;
/** Text shown in the custom footer on the far right for the metrics */
metricTexts?: MetricTexts;
/** CSS class used for the right container */
rightContainerClass?: string;
/** Optionally provide some text to be displayed on the right side of the footer (in the "right-footer" css class) */
rightFooterText?: string;
}
```
**Screenshot Demo**
Below is a print screen of the demo, you can see the full advantage of the custom footer with custom text on the left and filtered item count + timestamp on the right.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/custom-footer.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.