We’re happy to announce the release of Highcharts Grid Lite. If you’re looking for a fast way to add interactive, customizable data grids to your web apps without bloating your project with unnecessary dependencies, this tool is for you. It’s free, easy to configure, and built with developers in mind.
Read on to learn more about Grid Lite’s features and how to get started. You can also play around with a live JSFiddle demo to see all these features in action.
Why Grid Lite?
Grid Lite grew out of Highcharts Dashboards’ data grid. We realized many developers loved the grid component but didn’t always need the full dashboard experience. So we extracted essential functionality and created a free version that shares the same core codebase as Dashboards’ “pro” data grid minus the heavier extras.
Getting Started
To get started, all you need is a basic HTML file, a JavaScript config, and a data object that maps column keys to values.
Start by including the script and stylesheet in your HTML:
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css" />
Then, define your data using a simple key/value structure. Each key represents a column, and its value is an array of cell values for that column:
const employeeData = {
id: [
"a1B2c3D4e5",
"F6g7H8i9J0",
"K1l2M3n4O5",
"P6q7R8s9T0",
"U1v2W3x4Y5"
// ...
],
firstName: [
"Alice",
"Bob",
"Charlie",
"Dana",
"Evan"
// ...
],
lastName: [
"Smith",
"Johnson",
"Williams",
"Brown",
"Jones"
// ...
]
};Then, to render a simple grid, pass your data object to your grid configuration like this:
Grid.grid("our_grid", {
dataTable: {
columns: employeeData
}
});
This setup gives you a functional grid with minimal code. Check out this clip from our Grid Lite webinar for more info.
Formatting Columns and Cell Content
Grid Lite’s columns object makes it easy customize header titles:
columns: [
{
id: "jobTitle",
header: {
format: "Title"
}
}
// ...
It’s also easy to hide columns that you don’t want to show by setting the enabled option to false:
{
id: "lastName",
enabled: false
}
Using the cells object, you can customize your cell content and control its look and feel by assigning CSS classes. The format object makes it easy to inject values from your data into custom HTML and use them with interactive elements such as checkboxes and hyperlinks:
cells: {
className: "hcg-center",
format: "<input type='checkbox' value='{value}' />"
}
Cell formats also support conditional logic via JS-based templating, so you can configure what content to show and how to show it under certain conditions, like an alert icon for data aberrations or a special format for indicating missing data.
cells: {
format: "{#if (ne value '')}<a href='mailto:{value}'>{value}</a>{else}N/A{/if}"
}
If you require customization that goes beyond CSS and basic templating, you can use a callback function inside the cell.formatter object. The example below determines how to style a performance “badge” based on performance data.
formatter: function() {
const currentValue = this.value;
const previousValue = this.row.data.previousPerformance;
/* This could of course be optimized, but just to demo a use case for formatter with multiple calculation */
const color =
currentValue < previousValue ? ["red", "↓"] : currentValue > previousValue ?
["green", "↑"] :
["", ""];
const attention =
currentValue - previousValue < -10 ? "redder" : currentValue - previousValue > 10 ?
"greener" : "";
const badge = `
<span class="performance ${color[0]} ${attention}">
<span>${color[1]}</span>
${currentValue}
</span>
`;
return badge
}
Check out this clip from our Grid Lite webinar for more info on column and cell formatting and customization.
Global Theming with CSS
We’ve streamlined the process of creating custom global themes for grids through the use of CSS variables. Just edit the variable values in your local CSS file to override our defaults.
.our-theme {
--hcg-background: #d9ebe4;
--hcg-font-size: 14px;
--hcg-color: #000000;
--hcg-padding: 8px;
--hcg-border-width: 1px;
--hcg-border-color: #6aa68c;
--hcg-border-radius: 10px;
--hcg-header-background: #426b59;
--hcg-header-color: #ffffff;
--hcg-header-text-align: center;
--hcg-cell-hovered-background: #b6d1c5;
--hcg-cell-hovered-column-background: #c8e1d7;
--hcg-cell-hovered-row-background: #c8e1d7;
--hcg-cell-hovered-header-color: #b6d1c5;
--hcg-caption-color: #397b5f;
--hcg-caption-font-size: 20px;
}
While you can forgo the use of our variables and write your own custom CSS from scratch, we recommend using our system as it will help future-proof your grid’s appearance as we introduce new features and styles.
With your theme defined, assign the theme’s CSS class name to the rendering.theme object in your configuration like so:
rendering: {
theme: "our-theme"
}
To learn more about theming, check out this clip from our Grid Lite webinar.
Other Helpful Features
In addition to giving you total control over your grid’s content and appearance, Highcharts Grid Lite also includes features to help you optimize your grid’s performance and accessibility.
Grouped Headers
Use the header object to control the order of your columns independently from your data and organize them into logical groups. The example below creates a column group called “Employee Details” that includes the jobTitle, currentPerformance and salary columns.
header: [
"id",
"firstName",
"lastName",
"email",
{
format: "Employee details",
columns: [
"jobTitle",
"currentPerformance",
{
columnId: "salary",
format: "Salary",
},
],
},
]
Column grouping is handy for large datasets where you only need to show a few of your data’s columns without having to set each columns’ visibility independently.
Row Virtualization
Grid Lite uses row virtualization to optimize performance with large data sets. Instead of rendering all the rows of data at once, row virtualization shows only the rows currently visible within the user’s viewport. A small buffer zone above and below what’s visible allows off-screen rows to seamlessly appear as the user scrolls through the data grid.
Watch this clip from our Grid Lite webinar for more information on how to configure row virtualization.
Accessibility
As Grid Lite renders data using semantically-correct HTML tables instead of custom divs, our data grids are automatically accessible to screen readers without the need for additional ARIA markup. Our API also includes configuration options for ARIA announcers that are triggered when the composition of the grid changes due to cell sorting and editing.
Works with React and other frameworks
Grid Lite is a plain JavaScript library (for now) and plays well with most popular frameworks. Check out our documentation for step-by-step instructions on how to render your grids in React, Angular and Vue.
What’s Next?
This iteration of Highcharts Grid Lite is just the start. We have numerous features in development that we’re hoping to roll out shortly, including:
- Built-in data validation for cell data
- Out-of-the-box support for additional input types such as dropdown and checkboxes
- Built-in search and filtering
- Pagination configuration
- Sparklines inside cells
- Export options such as CSV, PDF and image formats
Want to Try It?
Start using Grid Lite today. You can find download/install instructions in our docs, and be sure to sign up for Grid Lite updates on our product page. And if you have time, check out the recording of our Grid Lite webinar.
Leave a Reply