In How to Add a Vue Pivot Grid to Your Web Application, we discussed how you could implement Wijmo’s PivotGrid. However, it isn’t always as easy as installing a library, writing a few lines of code, and compiling the application. You may need to update the look and feel of the library’s components so that they can seamlessly fit into your application’s design.
Luckily, Wijmo makes it easy to use CSS to customize its Vue Pivot Table, PivotGrid, and create custom HTML templates to set the layout of the PivotPanel. This article explains 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 Custom Pivot Grids? Download Wijmo Today!
Creating the HTML Template
Before creating the template, there are a few changes to make first. In the App.vue file, you can remove the line initializing the FlexChart component; we aren’t going to need it in this application. Your markup should look like so:
<template>
<div>
<div class="flextable">
<wj-pivot-panel :items-source="ng"></wj-pivot-panel>
<wj-pivot-grid :items-source="ng"></wj-pivot-grid>
</div>
</div>
<template>Next, inside of the <style> tags, 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;
}Lastly, open up the index.css file and make sure the following is included:
.wj-pivotgrid {
height: 600px;
width: 1200px;
}
.wj-pivotpanel {
height: 400px;
width: 650px;
margin: 0px 10px 0px 0px;
padding: 10px;
padding-right: 20px;
display: block;
}Now, if we save the application, our PivotPanel should look as follows:
So, this is where we’re starting from. What we’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 then assign to the PivotPanel’s controlTemplate property; this will override the base template that the OLAP module uses when rendering the PivotPanel. Add the following code inside of the component’s setup() function:
setup() {
wjOlap.PivotPanel.controlTemplate = `<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>`;
}Now, a lot is going on here, but it's very simple once you understand 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 section is what users can use to prevent the Vue 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. 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 we’ve set up the controls, it's time to decide on the app’s look. Dark mode has become a very popular style, so we will modify the controls to fit in with a dark theme. 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 we actually go changing colors, we need to 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 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 off 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;
}We’ve written a lot of CSS, but it's very simple once you know what you’re looking at. All we’re doing here is assigning each of the sections of the PivotPanel to a location in the CSS grid that we’ve created by setting row and column positions. We also added a little bit of spacing by using margins.
Before running the application, two other things need to be done first. The PivotPanel control supports a progress bar 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 Vue Pivot Table, PivotGrid, to match the dark mode theme.
Vue 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 index.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 Vue 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 we’ve demonstrated 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