Since you’ve been given the opportunity to use custom CSS, it has become a gateway to enhance component features or customize the unique design of each application. Although custom CSS is often seen as a non-native approach, I believe it is, in fact, a very basic form of comprehensive component enhancement.
The CSS I’m sharing below extends across all collection components (Card, List, Checklist, Calendar, Kanban, Table, and Data Grid) and also improves upon the code I provided in the In-app filter message for no matching results thread.
Key points to consider:
- The code below is divided into 3 groups: applies to all collections except Table and Data Grid (class name “allCollection”), Table (class name “newTable”), and Data Grid (class name “dataGrid”).
- The class names should be copied into the CSS class option in the component you are using, while the CSS code should be pasted into Settings > Appearance > Custom CSS. Don’t forget to enable “Preview Custom CSS” to see the results.
- If you have more than one of the same component on a single screen, you cannot use the same class name. Create new class names and code as you see fit.
All Collection - Empty Message
/* All Collection - Empty Message */
#page-root:not(:has(.allCollection [tabindex="0"])) .allCollection > *::after {
content: "Data not available";
color: Gray;
margin-top: 50px;
justify-content: center;
display: flex;
font-size: 1.75rem;
}
/* Hide Calendar-Kanban div */
#page-root:not(:has(.allCollection [tabindex="0"])) .allCollection > div > div > div > div > div:nth-child(2) {
display: none;
}
New Table - Empty Message
/* New Table - Empty Message */
#page-root:not(:has(.newTable tr:nth-child(2))) .newTable > div::after {
content: "Data not available";
color: Gray;
font-size: 1.75rem;
display: block;
text-align: center;
margin-top: 50px;
}
/* New Table - Hiding Header */
#page-root:not(:has(.newTable tr:nth-child(2))) .newTable tr:not(.newTable td:last-child) {
display: none;
}
Data Grid - Empty Message
/* Data Grid - Empty Message */
#page-root:not(:has(.dataGrid div.dvn-underlay > canvas:nth-child(1) > table > tbody > tr)) .dataGrid > *::after {
content: "Data not available";
color: Gray;
justify-content: center;
display: flex;
padding-top: 20px;
font-size: 1.75rem;
}
/* Data Grid - Hiding Header */
#page-root:not(:has(.dataGrid div.dvn-underlay > canvas:nth-child(1) > table > tbody > tr)) .dataGrid div.dvn-underlay {
display: none;
}