Responsive Column Filters
Demonstrated Features
- Column Filters
Required Skills
- Beginner Level
Required License
- Premium
Insights
Column filters are defined per column in the Column Actions section (docs). General column filter settings are defined in the Column Filters section and apply to all column filters (docs).
The column filter positioning for this data table depends on the device. If the device is wider than 900px, the column filters are shown to the left of the table. On smaller devices, the column filters are shown in a popup window. This feature requires the column filter positioning to be set to "LEFT" and "Show column filters in popup" enabled. The max table width for this table is set to 900px (docs).
The following CSS was added using the CSS Table Editor to save some space when the column filters are displayed to the left of the table:
.pp-filter-container .MuiPaper-root {
border-top: unset;
border-right: unset;
}
.pp-filter-container .MuiAccordion-heading .MuiAccordionSummary-content {
margin: 0;
}
.pp-filter-container .pp-column-search-field ul {
border: unset;
max-height: 140px;
margin: 0 0 10px 0;
}
.MuiAccordionDetails-root:has(ul) {
padding: 0 !important;
}Transactions are prohibited for anonymous users. Any attempt to insert, update, or delete data results in an "Unauthorized" error message.