sb-datagrid - Lightweight JavaScript DataGrid Component

Features

Resizable columns with drag-and-drop
Reorderable columns (drag headers to rearrange)
Auto-size columns (double-click headers or borders)
Column sorting (ascending/descending)
Row selection (single, multi, and range selection)
Custom cell renderers
Theming support (light, dark, compact, bordered)
Responsive design
Event callbacks for interaction
Dynamic data updates
Lightweight and performant

Basic Example

A simple data grid with employee information. Try:

Reorder columns: Drag and drop column headers
Resize columns: Drag the column borders
Auto-size columns: Double-click column headers or resizer borders
Sort data: Single-click column headers

Code:

const basicGrid = new DataGrid('#basic-grid', {
    columns: [
        { field: 'id', header: 'ID', width: '80px' },
        { field: 'name', header: 'Name' },
        { field: 'position', header: 'Position' },
        { field: 'department', header: 'Department' },
        { field: 'salary', header: 'Salary' }
    ],
    data: employeeData
});

Advanced Example with All Features

This example demonstrates sorting, selection, custom renderers, and event callbacks.

Selection:

Click: Select a single row
Ctrl/Cmd+Click: Add/remove individual rows to selection
Shift+Click: Select a range of rows
Ctrl/Cmd+Shift+Click: Add a range to existing selection

Selection: No rows selected

Custom Cell Renderers

Use custom renderers to display rich content in cells.

API Documentation

Constructor

new DataGrid(container, options)

Options

{
    columns: [],           // Array of column definitions
    data: [],             // Array of data objects
    resizable: true,      // Enable column resizing
    sortable: true,       // Enable column sorting
    selectable: false,    // Enable row selection
    reorderable: true,    // Enable column reordering
    theme: '',           // Theme class (dark, compact, bordered)
    minColumnWidth: 50,   // Minimum column width in pixels
    maxColumnWidth: null, // Maximum column width in pixels
    onSort: function(column, direction) {},      // Sort callback
    onSelect: function(selectedRows) {},         // Selection callback
    onResize: function(columnIndex, newWidth) {}, // Resize callback
    onReorder: function(fromIndex, toIndex, columns) {}, // Reorder callback
    onCellClick: function(row, column, cell) {},  // Cell click callback
    onCellDoubleClick: function(row, column, cell) {} // Cell double-click callback
}

Column Definition

{
    field: 'fieldName',        // Data field name
    header: 'Column Header',   // Display header text
    width: '150px',           // Initial width (px or fr)
    sortable: true,           // Enable sorting for this column
    resizable: true,          // Enable resizing for this column
    renderer: function(value, row, column) {}, // Custom cell renderer
    sorter: function(a, b, direction) {}      // Custom sort function
}

Methods

grid.setData(data)           // Update grid data
grid.addRow(row)            // Add a new row
grid.removeRow(index)        // Remove row by index
grid.updateRow(index, row)   // Update row data
grid.getSelectedRows()       // Get selected row data
grid.clearSelection()        // Clear all selections
grid.autoSizeColumn(index)   // Auto-size a specific column
grid.setTheme(theme)        // Change grid theme dynamically
grid.showSelectedOnly()     // Filter to show only selected rows
grid.showAll()              // Show all rows (clear filter)
grid.isFiltered()           // Check if grid is filtered
grid.refresh()              // Refresh the grid
grid.destroy()              // Destroy the grid instance

📊 sb-datagrid