In our ‘How to Use the Wijmo OLAP Component in React’ article, we discussed how you could implement Wijmo’s React 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 React 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 Tables? Download Wijmo Today!
Creating the HTML Template
Before creating the template, there are just a few changes to make first. In the App.js 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:
<div className="App">
<div className='flextable'>
<wjcOlap.PivotPanel itemsSource={ng}></wjcOlap.PivotPanel>
<wjcOlap.PivotGrid itemsSource={ng}></wjcOlap.PivotGrid>
</div>
</div>Next, open up the App.css file and modify the following CSS classes:
.App {
margin: 30px;
}
.flextable {
display: flex;
}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. Open up the App.js file and add the following code:
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 the 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 React pivot table from updating automatically.
The markup we’ve written there use 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 the controls are ready to be styled, it's time to decide on the app’s look. For this app, 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 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 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, its 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 {
margin: 0;
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 that we wanted when we began styling the control. In the next section, we’ll update Wijmo’s React Pivot Table, PivotGrid, to match the dark mode theme.
React Pivot Table Custom CSS
The final thing we have to take care of is matching the Pivot Table’s looks to check with the theme of our app, 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 styled properly. 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 React 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
