1. Products
  2.   Spreadsheet
  3.   JavaScript
  4.   SlickGrid
 
  

Free JavaScript Spreadsheet Component for Speedy Rendering & Processing

Open Source Free JavaScript Spreadsheet component allows speedy rendering, manage rows, column autosizing, cells handling and so on.

What is SlickGrid?

A very speedy fully open source JavaScript grid/spreadsheet component enables software developers to generate rich grids with custom controls and displays. The component supports virtual rendering which empowers users to work with hundreds of thousands of items without any drop in performance. Which means SlickGrid is capable of handling a grid with 100 rows or 100 thousand rows without compromising the performance. Previously it used to support jQuery UI Themes but from SlickGrid 3.0.0, the team has removed all the related code and replaced it with more modern SortableJS.

The SlickGrid component is fully customizable and provides extremely fast rendering speed. The component has included several important features for managing spreadsheets, such as rendering spreadsheets, background post-rendering for richer cells, keyboard navigation, column resizing, reordering columns, showing/hiding columns or rows, inserting new rows, editing new rows, multi-field editors with undo/redo support, adding formatting and styles and so on. It is compatible with data-centered frameworks and with Bootstrap

Previous Next

Getting Started with SlickGrid

The recommended way to install SlickGrid, is using npm, To install SlickGrid, just add the following script tag in the browser.

Install SlickGrid via npm

npm install slickgrid

You can download the compiled shared library from GitHub repository and install it.

How to Merge Cells using JavaScript API?

Merging cells inside a spreadsheet is a very useful feature which often used to center text across several rows or columns and can be helpful to combine the data strings of two or more cells. Its main purpose is to make the data presentable and readable for the end-user. The Open source SlickGrid JavaScript component allows software developers to combine multiple cells, rows, or columns inside their own JavaScript applications.

Spreadsheet Cells Merging via JavaScript API

function VerCellMergedFormatter(row, cell, value, columnDef, dataContext) {
    var options = window._renderOptions;
    if (options.lastRendering != 1) {
        return;
    }

    var items = window.getRenderDataItmes();
    var fieldName = columnDef.field;
    var rowsLength = items.length;
    var currentItem = items[row];

    var nextRowIndex = row + 1;
    if (nextRowIndex < rowsLength){
        var nextValue = items[nextRowIndex][fieldName];
        if (value == nextValue) {
            if (!options.changedCells[row]) {
                options.changedCells[row] = {};
            }
            options.changedCells[row][fieldName] = "noneline-bottom";
            options.isNextMerged = 1;
            return value;
        }
        else {
            if (options.isNextMerged == 1) {
                options.isNextMerged = 0;
                return;
            }
        }
    }
    return value;
}

Edit Spreadsheet Columns, Rows & Cells via JS

The SlickGrid component enables software developers to handle spreadsheet cells in various ways inside their JavaScript applications. The library has provided several important features for handling spreadsheet cells, columns, and rows such as, inserting new cells, editing existing cells, delete unwanted cells. It has also provided support for auto sizing columns, resizing, reordering, displaying, and hiding columns and rows using JavaScript commands.

Add New Row & Click to Edit Cell via JavaScript API

var d =  $scope.$grid.grid.getData();
$scope.$grid.grid.invalidateRow(d.length);
//Adds the new row as the first row.
d.unshift(item);
$scope.$grid.grid.updateRowCount();
$scope.$grid.grid.setData(d);
$scope.selectedRows = [];
$scope.selectedRows = [0];

//Sets the first row and first column as editable by clicking on it

$scope.$grid.grid.setActiveCell($scope.selectedRows,0);
//$scope.$grid.grid.gotoCell(0,0,true);
var grid = $scope.$grid.grid;
var row = $scope.selectedRows[0];
var col = 0;
grid.setActiveCell(row, col);
grid.editActiveCell(Slick.Acsiom.Editors.Text);

Auto Column Sizing via JavaScript API

The open source SlickGrid component has provided a very useful feature for applying auto-column sizing inside JavaScript applications. It provides a column autosizing API that enables the grid to make intelligent selections about the width of its columns based on the cell content of the header and rows. Please remember that data must be provided for autosizing and that there must be data present to test for size because it's very hard for an automated sizing algorithm to work without any data.

 English