All Projects → john-doherty → Puregrid

john-doherty / Puregrid

Licence: isc
Lightweight JavaScript Grid/SpreadSheet component written in pure JavaScript

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Puregrid

Sheetjs
📗 SheetJS Community Edition -- Spreadsheet Data Toolkit
Stars: ✭ 28,479 (+284690%)
Mutual labels:  spreadsheet, grid, table, html5
React Spreadsheet Grid
An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns
Stars: ✭ 996 (+9860%)
Mutual labels:  spreadsheet, grid, table
Nghandsontable
Official AngularJS directive for Handsontable
Stars: ✭ 438 (+4280%)
Mutual labels:  spreadsheet, grid, table
React Handsontable
React Data Grid with Spreadsheet Look & Feel. Official React wrapper for Handsontable.
Stars: ✭ 511 (+5010%)
Mutual labels:  spreadsheet, grid, table
Hot Table
Handsontable - Best Data Grid Web Component with Spreadsheet Look and Feel.
Stars: ✭ 114 (+1040%)
Mutual labels:  spreadsheet, grid, table
react-datasheet-grid
An Airtable-like / Excel-like component to create beautiful spreadsheets.
Stars: ✭ 227 (+2170%)
Mutual labels:  grid, table, spreadsheet
React Datasheet
Excel-like data grid (table) component for React
Stars: ✭ 4,866 (+48560%)
Mutual labels:  spreadsheet, grid, table
Angular Handsontable
Angular Data Grid with Spreadsheet Look & Feel. Official Angular wrapper for Handsontable.
Stars: ✭ 175 (+1650%)
Mutual labels:  spreadsheet, grid, table
Grid
Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets and more 💥
Stars: ✭ 573 (+5630%)
Mutual labels:  spreadsheet, grid, table
react-bolivianite-grid
React grid component for virtualized rendering large tabular data.
Stars: ✭ 95 (+850%)
Mutual labels:  grid, table, spreadsheet
Vue Handsontable Official
Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.
Stars: ✭ 751 (+7410%)
Mutual labels:  spreadsheet, grid, table
Grid.blazor
Grid component with CRUD for Blazor (client-side and server-side) and ASP.NET Core MVC
Stars: ✭ 335 (+3250%)
Mutual labels:  grid, table
Vue Tables
Vue.js grid components
Stars: ✭ 361 (+3510%)
Mutual labels:  grid, table
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+43190%)
Mutual labels:  grid, table
Datatablesbundle
This Bundle integrates the jQuery DataTables plugin into your Symfony application.
Stars: ✭ 334 (+3240%)
Mutual labels:  grid, table
Cheetah Grid
The fastest open-source data table for web.
Stars: ✭ 417 (+4070%)
Mutual labels:  spreadsheet, grid
Gijgo
Gijgo - Free Javascript Controls
Stars: ✭ 424 (+4140%)
Mutual labels:  grid, table
Vxe Table
🐬 vxe-table vue 表格解决方案
Stars: ✭ 4,242 (+42320%)
Mutual labels:  grid, table
Ngx Datatable
✨ A feature-rich yet lightweight data-table crafted for Angular
Stars: ✭ 4,415 (+44050%)
Mutual labels:  grid, table
Reogrid
Fast and powerful .NET spreadsheet component, support data format, freeze, outline, formula calculation, chart, script execution and etc. Compatible with Excel 2007 (.xlsx) format and working on .NET 3.5 (or client profile), WPF and Android platform.
Stars: ✭ 532 (+5220%)
Mutual labels:  spreadsheet, grid

pureGrid

Linked In Twitter Follow

pureGrid is a pure JavaScript (no bloated script libraries) editable grid that uses minimal JavaScript and well-formed HTML to deliver a lightning fast data grid. It only renders the table rows and cells required to occupy your screen and rather than creating new DOM rows on scroll, it simply updates the innerText of each cell (dramatically reducing reflows).

It uses JavaScript only when ABSOLUTELY necessary, therefore rather than rendering a separate table to lock the header row, it simply skips that row when scrolling. Also, pureGrid does not contain any window.onresize code, instead the re-sizing is left to the browser.

Key Features

  • Reduced DOM nodes makes shifting through large amounts of data fast and scalable
  • Fixed table header issue is bypassed as only td's are updated on scroll
  • Server Independent (requires only a JavaScript multi dimensional array wrapped as JsonP to work)
  • using textContent/innerText to update the cells means the DOM does not have to parse the input string for new nodes - faster!
  • passes as much responsibility as possible back to the browser, such as resizing

Example

Add the puregrid.css and puregrid.js references to your page.

<link rel="stylesheet" type="text/css" href="styles/puregrid.css" />
<script type="text/javascript" src="script/puregrid.js"></script>

Then add a placeholder <div class="puregrid"></div> to the body of your HTML where you would like the grid to be rendered. If you include a hidden input with class="puregrid-data-url" within your div (pointing to your JsonP URL) pureGrid will load the file immediately.

<div id="testGrid1" class="puregrid">
    <input type="hidden" class="puregrid-data-url" value="data/data-500.js" />
</div>

Ensure your puregrid-data-url returns a valid JsonP response containing your desired table configuration and data, for example:

pureGrid.bind('testGrid1', {
    caption : '',
    cols : 4,
    rows : 4,
    css: 'test-view',
    firstRowIsHeader: true,
    firstCoIsHeader: true,
    selectableRows : true,
    selectableCells: true,
    editable : true,
    dataTypes : ['','^\\w+$',['one','two','three'],''],
    data : [
        ['','A','B','C','D'],
        ['1', 'A1', 'B1', 'C1', 'D1'],
        ['2', 'A2', 'B2', 'C2', 'D2'],
        ['3', 'A3', 'B3', 'C3', 'D3']
    ]
});

That's it, you now have an editable (or readonly) grid that can handle thousands of rows.

Setting column widths

All visual aspects of the grid are controlled via CSS. Each column is rendered with an associated col tag assigned with a class name of puregrid-col2 for column 2, puregrid-col3 for column 3 and so on. So, to set the width of a particular column in a grid with an id of id="testGrid1" you would use the following CSS:

#testGrid1 .puregrid-col2 { width: 170px; }
#testGrid1 .puregrid-col3 { width: 40px; }

Hooking events

pureGrid uses the Publish–Subscribe pattern, whereby you subscribe to an event and receive a callback when the event fires. This allows you to provide multiple event handlers for the same event in multiple locations. For Example:

pureGrid.event.subscribe('onready', function(){
    alert('ready!');
});

Please Note

This code was written in 2013, a lot has changed since then and I'm planning a rewrite to make it production ready.

License

Licensed under ISC License © John Doherty

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].