In our How to Add an Angular Pivot Grid to Your Web Application article, we discussed the basics of using Wijmo’s PivotGrid. However, it isn’t always as simple as installing a control set, setting up some code, and pushing the application to production. You may need to make stylistic changes so that the controls fit into a single, cohesive design.
Luckily, Wijmo makes it easy to use CSS to customize its Angular pivot table and create custom HTML templates to set the layout of the PivotPanel. In this article, we’ll show you how you can easily customize both of these controls to fit a specific style. We’ll be covering the following:
If you’d like to follow along while we review the code, we’ll use this repository as our starting point. If you’d like to see the finished code, you can find that repository at the end of the article. Now, let’s get started!
Ready to Create Pivot Grids? Download Wijmo today!
Creating the HTML Template
Before creating the template, there are just a few changes to make. In the app.component.html file, you can remove the line initializing the FlexChart component; we aren’t going to need it in this application. Next, open up the styles.css file and modify the following CSS classes:
.flextable {
display: flex;
}
.wj-pivotgrid {
height: 600px;
width: 1200px;
}
.wj-pivotpanel {
height: 400px;
width: 650px;
margin: 0px 10px 0px 0px;
padding: 10px;
padding-right: 20px;
}Now, if we save the application, our PivotPanel should look as follows:
So, this is where we’re starting from. What I’d like to do for this application is to give the panel a dark mode style and better define the areas to which users can drag fields. To do this, the first thing that we’re going to do is write some custom HTML.
The PivotPanel control allows us to create a custom HTML template, which we can assign to the PivotPanel’s controlTemplate property. Open up the app.component.ts file and add the following code:
const customTemplate: string = `<div class="root">
<div class="field-list-label">
<label wj-part="g-flds"></label>
</div>
<div class="field-list pad">
<div wj-part="d-fields"></div>
</div>
<div class="drag-areas-label">
<label wj-part="g-drag"></label>
</div>
<div class="filter-list pad">
<label>
<span class="wj-glyph wj-glyph-filter"></span>
<span wj-part="g-flt"></span>
</label>
<div wj-part="d-filters"></div>
</div>
<div class="column-list pad bdr-left">
<label>
<span class="wj-glyph">⫴</span>
<span wj-part="g-cols"></span>
</label>
<div wj-part="d-cols"></div>
</div>
<div class="row-list pad bdr-top">
<label>
<span class="wj-glyph">≡</span>
<span wj-part="g-rows"></span>
</label>
<div wj-part="d-rows"></div>
</div>
<div class="values-list pad bdr-left bdr-top">
<label>
<span class="wj-glyph">Σ</span>
<span wj-part="g-vals"></span>
</label>
<div wj-part="d-vals"></div>
</div>
<div wj-part="d-prog" class="progress-bar"></div>
<div class="control-area">
<label>
<input wj-part="chk-defer" type="checkbox">
<span wj-part="g-defer">Defer Updates</span>
</label>
<button wj-part="btn-update" class="wj-btn wj-state-disabled" type="button" disabled>
Update
</button>
</div>
</div>`;
...
constructor(private dataService: DataService) {
wjOlap.PivotPanel.controlTemplate = customTemplate;
...
}There’s a lot of HTML here; however, it's very straightforward once you know what you’re looking at. The PivotPanel is broken up into three sections: Fields, Areas, and Control Area. The Fields section is made up of a list of selectable field elements. The Areas section is broken up into four sub-sections (Filter, Column, Row, and Value.) The Control Area is what users can use to prevent the Angular pivot table from updating automatically.
The markup we’ve written there uses some core Wijmo CSS classes (such as .wj-glyph and .wj-btn), but this HTML strips out most of the styles to give us a blank slate to work with. Finally, inside the constructor, we assign this custom template to the PivotPanel’s controlTemplate property. Saving the application and running it will show us our updated panel:
Now we can take all of these divs and add custom CSS. We’ll jump into that in the next section of the article.
Styling the Pivot Panel Control
Now that the controls are ready to be styled, it's time to decide on the look we will go for. In this app, we want to modify the controls to fit in with a dark-themed application. To do so, we’re going to be using the following three colors to style our application:
- #141414 (primary color)
- #333333 (secondary color)
- #595959 (tertiary color)
Before changing colors, we must set the layout for our Pivot Panel control. We want the layout to look by having our list of fields take up the left-hand side of our control and placing the field areas on the right-hand side in a 2x2 grid.
To do this, we’re going to set the display of the PivotPanel to a grid and set it up to have four columns:
.wj-pivotpanel .root {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(4, 25%);
height: 100%;
}Next, we need to make sure that the area labels are properly stylized:
.wj-pivotpanel .field-list-label {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1/span 2;
-ms-grid-row: 1;
grid-row: 1;
}
.wj-pivotpanel .drag-areas-label {
-ms-grid-column: 3;
-ms-grid-column-span: 2;
grid-column: 3/span 2;
-ms-grid-row: 1;
grid-row: 1;
}As you can see, each of these elements starts in the first row of our grid; the field-list-label starts in the first column, while the drag-areas-label starts in the 3rd column.
Next, like with the labels, we need to assign our fields and field areas positions in the control:
.wj-pivotpanel .field-list {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1/span 2;
-ms-grid-row: 2;
-ms-grid-row-span: 2;
grid-row: 2/span 2;
border: 1px solid rgba(0, 0, 0, .2);
margin-top: 5px;
height: 322px;
}
.wj-pivotpanel .filter-list {
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 2;
grid-row: 2;
height: 95%;
border: 1px solid rgba(0, 0, 0, .2);
margin: 5px;
}
.wj-pivotpanel .column-list {
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 2;
grid-row: 2;
height: 95%;
border: 1px solid rgba(0, 0, 0, .2);
margin: 5px;
margin-left: 10px;
}
.wj-pivotpanel .row-list {
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 3;
grid-row: 3;
height: 95%;
border: 1px solid rgba(0, 0, 0, .2);
margin: 5px;
}
.wj-pivotpanel .values-list {
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 3;
grid-row: 3;
height: 95%;
border: 1px solid rgba(0, 0, 0, .2);
margin: 5px;
margin-left: 10px;
}There’s a lot of CSS here, but it's not as complicated as you think. This is simply placing all our different lists into sections of the grid we’ve created. We set the grid row and column positions for each element, add some margins and a border, and that’s it!
Before running the application, two other things need to be done first. The PivotPanel control supports a progress bar for if you’re using a lot of data and the ability to defer updates until the user decides to push them. Since these are features of the PivotPanel, we need to ensure they’re also styled.
Just like the fields and list, this is very simple to implement with CSS:
.wj-pivotpanel .progress-bar {
-ms-grid-column: 1;
-ms-grid-column-span: 4;
grid-column: 1/span 4;
-ms-grid-row: 4;
grid-row: 4;
width: 0px;
height: 3px;
}
.wj-pivotpanel .control-area {
-ms-grid-column: 1;
-ms-grid-column-span: 4;
grid-column: 1/span 4;
-ms-grid-row: 4;
grid-row: 4;
display: -ms-grid;
display: grid;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: end;
-ms-grid-columns: 1fr auto;
grid-template-columns: 1fr auto;
}The second is making sure that all of the field areas are the same height, as well as setting up disabled/enabled button layouts for deferring updates:
.wj-pivotpanel .pad {
padding: 6px;
}
.wj-pivotpanel .values-list .wj-flexgrid {
height: 118px;
}
.wj-pivotpanel .filter-list .wj-flexgrid {
height: 118px;
}
.wj-pivotpanel .column-list .wj-flexgrid {
height: 118px;
}
.wj-pivotpanel .row-list .wj-flexgrid {
height: 118px;
}
.wj-control a.wj-btn, .wj-viewer .wj-control a.wj-applybutton, .wj-control button.wj-btn:not(.wj-btn-default), .wj-viewer .wj-control button.wj-applybutton:not(.wj-btn-default) {
border: 1px solid rgb(66, 66, 66);
border-style: solid;
color: white;
background-color: #3f51b5;
}
.wj-control a.wj-btn:hover, .wj-viewer .wj-control a.wj-applybutton:hover, .wj-control button.wj-btn:not(.wj-btn-default):hover, .wj-viewer .wj-control button.wj-applybutton:not(.wj-btn-default):hover {
border: 1px solid rgb(66, 66, 66);
border-style: solid;
color: white;
background-color: #5d6fd4;
}Now, if we run our application, we should see the following:
As you can see, it's significantly more compact than before, and you don’t lose any information from the control.
The final thing before we move on to the next section is to make sure we’ve styled the control to fit a dark mode theme. At the beginning of this section, we mentioned the color palette we would use; now, it’s time to implement it. Update the CSS on the following elements:
body {
background: #141414;
}
.wj-pivotpanel {
min-height: 0;
height: 400px;
width: 650px !important;
margin: 0px 10px 0px 0px;
display: block;
background: #333;
color: white;
padding: 10px;
padding-right: 20px;
}
.wj-pivotpanel .wj-flexgrid {
min-height: 4em;
max-height: 310px;
background: inherit;
color: white;
}Now, if we save and rerun the application, we should see the following:
As you can see, the PivotPanel matches the look and feel we wanted when we began styling the control. In the next section, we’ll update Wijmo’s Angular Pivot Table, PivotGrid, to match the dark mode theme.
Angular Pivot Table Custom CSS
The final thing we have to take care of is matching the Pivot Table’s looks to match our app's theme, which should be easy enough. Open up the styles.css file and modify the .wj-pivotgrid class as follows:
.wj-pivotgrid {
height: 600px;
width: 1200px;
border: 1px sold #333;
background: #333;
}Now our grid container will fit the look of the rest of the app. However, we’re not done! We have to make sure the cells are also appropriately styled. To do so, add the following CSS:
.wj-cell {
background: #333;
color: white;
}
.wj-cell.wj-header {
background: #595959;
color: white;
}
.wj-cell.wj-aggregate {
background: #595959 !important;
color: white;
}
.wj-cell.wj-align-right.wj-aggregate {
background: #595959 !important;
}This will style both the data cells and the header cells. If we run our application, add some fields, and take a look at the Pivot Table, we should see the following:
And that’s it! It's that simple to customize the look of Wijmo’s Angular Pivot Table, PivotGrid, to match the look of your application.
Conclusion
Congratulations! Now that you’ve gone through this article, you should have no issues customizing and styling Wijmo’s PivotPanel and PivotGrid controls. We’ve shown how you can customize the Panel layout and how these controls can be customized to fit any layout or style scheme.
If you’d like to download the application from this article, the repository containing the project can be found here.
If you’d like to try out Wijmo, you can download the entire UI component library, available in pure JavaScript, Angular, React, and Vue, here.
Happy coding!
Tags:
Related Blogs
Try Our JavaScript UI Components & Datagrid
Chris Bannon