opengridjs
Advanced tools
A lightweight JavaScript grid framework that allows you to create fast and easy-to-use data grids in your web application. It supports virtual scrolling, custom column headers, and context menus.
A lightweight, high-performance JavaScript grid framework for modern web applications. OpenGridJs delivers fast, responsive data grids with virtual scrolling, advanced column management, and extensive customization options.
npm install opengridjs
<link rel="stylesheet" href="https://unpkg.com/opengridjs@latest/opengrid.min.css">
<script src="https://unpkg.com/opengridjs@latest/opengrid.min.js"></script>
Download the latest release from the GitHub releases page.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/opengridjs/opengrid.min.css">
<script src="https://unpkg.com/opengridjs/opengrid.min.js"></script>
</head>
<body>
<div id="myGrid"></div>
<script>
// Sample data
const sampleData = [
{ id: 1, name: "John Doe", email: "john@example.com", age: 30 },
{ id: 2, name: "Jane Smith", email: "jane@example.com", age: 25 },
{ id: 3, name: "Bob Johnson", email: "bob@example.com", age: 35 }
];
// Initialize grid
const grid = new OpenGrid("myGrid", sampleData, 400);
</script>
</body>
</html>
new OpenGrid(containerId, data, height, setup, loadMoreFunction)
| Parameter | Type | Required | Description |
|---|---|---|---|
containerId | string | ✅ | ID of the container element |
data | Array/Function | ✅ | Initial data or async loading function |
height | number | ✅ | Grid height in pixels |
setup | Object | ❌ | Configuration options |
loadMoreFunction | Function | ❌ | Function for infinite scrolling |
const setup = {
columnHeaderNames: [
{
columnName: "name",
columnNameDisplay: "Full Name",
columnWidth: "200px", // Optional: specific width
autoresize: false, // Optional: prevent auto-resize for this column
format: (value) => value.toUpperCase() // Optional: custom formatter
},
{
columnName: "email",
columnNameDisplay: "Email"
// autoresize defaults to true — width adjusts automatically
}
],
contextMenuTitle: "Actions",
contextMenuOptions: [
{
actionName: "Edit",
actionFunctionName: "editRow",
className: "edit-action"
},
{
actionName: "Delete",
actionFunctionName: "deleteRow",
className: "delete-action"
}
]
};
| Property | Type | Default | Description |
|---|---|---|---|
columnName | string | Data field name | |
columnNameDisplay | string | columnName | Display name in header |
columnWidth | string | CSS width value (e.g., "200px", "20%") | |
autoresize | boolean | true | Whether the column participates in auto-resize. Set to false to preserve columnWidth. |
format | function | Custom formatting function |
| Property | Type | Description |
|---|---|---|
actionName | string | Display text for menu item |
actionFunctionName | string | Global function name to call |
className | string | CSS class for styling |
async function loadData() {
const response = await fetch('/api/data');
return response.json();
}
const grid = new OpenGrid("myGrid", loadData, 400, setup);
async function loadMoreData() {
const response = await fetch(`/api/data?page=${currentPage++}`);
const newData = await response.json();
grid.appendData(newData);
}
const grid = new OpenGrid("myGrid", loadData, 400, setup, loadMoreData);
const setup = {
columnHeaderNames: [
{
columnName: "price",
columnNameDisplay: "Price",
format: (value) => `$${value.toFixed(2)}`
},
{
columnName: "date",
columnNameDisplay: "Created",
format: (value) => new Date(value).toLocaleDateString()
},
{
columnName: "email",
columnNameDisplay: "Email",
format: (value) => `<a href="mailto:${value}">${value}</a>`
}
]
};
| Method | Parameters | Description |
|---|---|---|
appendData(data) | Array | Add new data to the grid |
updateData(data) | Array/Function | Replace all grid data (accepts array or async function) |
updateRecordData(data, options) | Array/Object, Options | Update records by ID with animations |
rerender() | none | Force grid re-render |
reset() | none | Reset grid to initial state |
exportToCSV() | none | Download grid data as CSV |
searchFilter(term) | string | Filter data by search term |
clearAllFilters() | none | Remove all column filters |
autoResizeColumns() | none | Re-distribute column widths (respects autoresize setting) |
stopLoadingMoreData() | none | Disable infinite scrolling |
// Add new data
grid.appendData([
{ id: 4, name: "Alice Brown", email: "alice@example.com", age: 28 }
]);
// Real-time updates with animations
// Update single record
grid.updateRecordData({ id: 2, score: 95, status: "Active" });
// Update multiple records
grid.updateRecordData([
{ id: 1, score: 88 }, // Green animation if score increased
{ id: 3, score: 72 } // Red animation if score decreased
]);
// Update with custom options
grid.updateRecordData(
{ id: 4, name: "John Updated", score: 90 },
{
animate: true, // Enable animations (default: true)
preservePosition: true, // Prevent row reordering (default: true)
highlightDuration: 3000 // Animation duration in ms (default: 2000)
}
);
// Filter data
grid.searchFilter("john");
// Export to CSV
grid.exportToCSV();
// Reset grid
grid.reset();
OpenGridJs now supports real-time data updates with visual animations and intelligent positioning:
// Numeric increase (green animation)
grid.updateRecordData({ id: 1, score: 95 }); // if previous score was lower
// Numeric decrease (red animation)
grid.updateRecordData({ id: 1, score: 75 }); // if previous score was higher
// Non-numeric change (blue animation)
grid.updateRecordData({ id: 1, name: "New Name", status: "Updated" });
| Option | Type | Default | Description |
|---|---|---|---|
animate | boolean | true | Enable/disable animations |
preservePosition | boolean | true | Prevent row reordering during updates |
highlightDuration | number | 2000 | Animation duration in milliseconds |
Try the interactive demo at demo-realtime-updates.html to see all features in action!
OpenGridJs provides extensive CSS customization options:
/* Custom theme example */
.opengridjs-grid {
--primary-color: #007bff;
--background-color: #ffffff;
--border-color: #dee2e6;
--hover-color: #f8f9fa;
--selected-color: #e3f2fd;
}
.opengridjs-grid-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.opengridjs-grid-row:hover {
background-color: var(--hover-color);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
OpenGridJs includes comprehensive test coverage:
# Run tests
npm test
# Run tests with coverage
npm run test:coverage
# Watch mode
npm run test:watch
# Clone repository
git clone https://github.com/amurgola/OpenGridJs.git
cd OpenGridJs
# Install dependencies
npm install
# Run tests
npm test
# Build minified versions
npm run build
Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)| Browser | Version |
|---|---|
| Chrome | ≥ 60 |
| Firefox | ≥ 55 |
| Safari | ≥ 12 |
| Edge | ≥ 79 |
OpenGridJs is released under the MIT License.
Made with ❤️ by the OpenGridJs team
FAQs
A lightweight JavaScript grid framework that allows you to create fast and easy-to-use data grids in your web application. It supports virtual scrolling, custom column headers, and context menus.
The npm package opengridjs receives a total of 13 weekly downloads. As such, opengridjs popularity was classified as not popular.
We found that opengridjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.