spk-reusable-table

v1.0.5

Published

2 months ago

A powerful, reusable table library supporting React and Angular with advanced features like infinite data, themes, pagination, and more.

0High
0Medium
0Low

roge2025

table grid react angular javascript library

Reusable Table

A powerful, reusable table library supporting React and Angular with advanced features like infinite data, themes, pagination, and more.

Features

✅ Basic table rendering with column definitions
✅ Client-side and server-side pagination
✅ Client-side and server-side sorting
✅ Client-side filtering
✅ Row selection (single and multiple)
✅ Theming support
✅ Vanilla JS, React, and Angular support
🔄 More features coming soon (grouping, aggregation, export, etc.)

Installation

npm install spk-reusable-table

Usage

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Reusable Table Example</title>
</head>
<body>
    <div id="table-container"></div>
    <script src="path/to/reusable-table.js"></script>
    <script>
        const columnDef = [
            { field: 'id', headerName: 'ID' },
            { field: 'name', headerName: 'Name' },
            { field: 'age', headerName: 'Age' }
        ];

        const data = [
            { id: 1, name: 'John', age: 30 },
            { id: 2, name: 'Jane', age: 25 }
        ];

        const table = new ReusableTable({
            container: document.getElementById('table-container'),
            columnDef: columnDef,
            data: data,
            pagination: true,
            pageSize: 10,
            rowSelection: 'multiple'
        });
    </script>
</body>
</html>

React

import React, { useEffect, useRef } from 'react';
import ReusableTable from 'spk-reusable-table';

function App() {
    const containerRef = useRef();

    const columnDef = [
        { field: 'id', headerName: 'ID' },
        { field: 'name', headerName: 'Name' }
    ];

    const data = [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' }
    ];

    useEffect(() => {
        const table = new ReusableTable({
            container: containerRef.current,
            columnDef: columnDef,
            data: data,
            pagination: true,
            rowSelection: 'multiple'
        });
    }, []);

    return <div ref={containerRef}></div>;
}

Angular

import { Component, ElementRef, ViewChild } from '@angular/core';
import ReusableTable from 'spk-reusable-table';

@Component({
    selector: 'app-table',
    template: '<div #tableContainer></div>'
})
export class TableComponent {
    @ViewChild('tableContainer') container: ElementRef;

    ngAfterViewInit() {
        const table = new ReusableTable({
            container: this.container.nativeElement,
            columnDef: [
                { field: 'id', headerName: 'ID' },
                { field: 'name', headerName: 'Name' }
            ],
            data: [
                { id: 1, name: 'John' }
            ]
        });
    }
}

API Reference

Constructor Options

container: DOM element to render the table in
columnDef: Array of column definitions
data: Array of row data
pagination: Enable pagination (boolean)
pageSize: Number of rows per page
currentPage: Current page number
rowSelection: 'single', 'multiple', or false
theme: Theme name ('default', 'dark', etc.)
serverSide: Enable server-side operations (boolean)
onPageChange: Callback for page changes
onSortChange: Callback for sort changes
onFilterChange: Callback for filter changes
onSelectionChange: Callback for selection changes

Column Definition

{
    field: 'columnField',     // Data field name
    headerName: 'Header',     // Display name
    sortable: true,           // Enable sorting
    filterable: true          // Enable filtering
}

Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC