🧠 Smart Table Elsolya

The ultimate headless table engine for the modern web. Build insanely powerful data grids with AI insights, real-time collaboration, and 25+ advanced plugins. Framework-agnostic at its core with native adapters for React, Vue, Angular, Next.js, and Nuxt.js.

🚀 Why Smart Table Elsolya?

• ⚡ Headless First: You keep 100% control over the UI. We provide the brain; you provide the beauty.
• 🤖 AI-Powered: Natural Language Queries, anomaly detection, and automated data summarization.
• 🔗 Real-time Collaboration: Multi-user cursor sharing, row locking (Google Docs style), and live comments.
• 📦 Plugin Ecosystem: 25+ built-in plugins for everything from Heatmaps to Offline Queues.
• 📱 Multi-Framework: First-class support for React, Vue 3, and Angular 17.
• 🔒 Enterprise Ready: Row-level security, column masking, audit logs, and version history.

📦 Installation

npm install smart-table-elsolya

💅 Add Premium Styling

Import the modern theme in your app.vue, main.ts, or global CSS file:

import 'smart-table-elsolya/src/themes/modern.css';

🚀 Quick Scaffolding (CLI)

Start a fresh project with your favorite framework in seconds:

# For React
npx create-smart-table-elsolya my-project react

# For Vue
npx create-smart-table-elsolya my-project vue

# For Angular
npx create-smart-table-elsolya my-project angular

🛠️ Usage Guides

⚛️ React & Next.js

The React adapter provides a reactive hook and a base view component.

import { useSmartTable, SmartTableView, filterPlugin } from 'smart-table-elsolya';

export function MyDashboard() {
  const table = useSmartTable({
    data: users,
    columns: [
      { id: 'name', header: 'User Name', filterable: true },
      { id: 'email', header: 'Email' }
    ],
    plugins: [filterPlugin()],
    storageKey: 'user-table-v1'
  });

  return (
    <div className="p-4">
      <input 
        className="border p-2 mb-4"
        placeholder="Search..." 
        onChange={(e) => table.setGlobalSearch(e.target.value)} 
      />
      <SmartTableView table={table} />
    </div>
  );
}

💚 Vue 3 & Nuxt 3

Vue users use a Composable and a functional component.

<script setup>
import { useSmartTable, SmartTableView } from 'smart-table-elsolya/vue';
import { sortingPlugin } from 'smart-table-elsolya/plugins';

const table = useSmartTable({
  data: props.data,
  columns: [
    { id: 'title', header: 'Task Title', sortable: true }
  ],
  plugins: [sortingPlugin()]
});
</script>

<template>
  <SmartTableView :table="table" />
</template>

🅰️ Angular 17+

Angular uses a Service-based approach to bridge the engine with components.

import { Component } from '@angular/core';
import { SmartTableComponent, SmartTableService } from 'smart-table-elsolya/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SmartTableComponent],
  template: `<smart-table-view [table]="table"></smart-table-view>`
})
export class AppComponent {
  table = new SmartTableService({
    data: [{ id: 1, name: 'Ahmed' }],
    columns: [{ id: 'name', header: 'Full Name' }]
  }).getTable();
}

🤖 AI & Data Intelligence

import { aiPlugin } from 'smart-table-elsolya/plugins';

const table = useSmartTable({
  data,
  columns,
  plugins: [
    aiPlugin({
      provider: {
        query: async (input, context) => {
          // NLQ logic here
          return [{ type: 'setGlobalSearch', value: 'High Priority' }];
        }
      }
    })
  ]
});

// Trigger AI action
const actions = await table.state.meta.aiQuery("Show high priority");

🔗 Real-time Collaboration

import { collaborationPlugin } from 'smart-table-elsolya/plugins';

const table = useSmartTable({
  data,
  columns,
  plugins: [
    collaborationPlugin({
      currentUser: { id: 'user-1', name: 'Ahmed Niazy' },
      adapter: {
        send: (event) => socket.emit('table-event', event),
        subscribe: (handler) => socket.on('table-event', handler)
      }
    })
  ]
});

🎨 Theming (CSS Variables)

:root {
  --st-primary: #6366f1;
  --st-bg: #ffffff;
  --st-text: #1f2937;
  --st-border: #e5e7eb;
}

/* Dark Mode support */
.dark-mode {
  --st-bg: #111827;
  --st-text: #f3f4f6;
}

🧩 Plugins List (25+)

| Plugin | Category | Description | | :--- | :--- | :--- | | aiPlugin | Intelligence | Natural language queries & anomaly detection | | collaborationPlugin| Social | Real-time cursors, locking, and comments | | heatmapPlugin | Viz | Dynamic cell background colors based on values | | sparklinePlugin | Viz | Mini charts for trend visualization in cells | | keyboardShortcuts | UX | Full keyboard control system | | offlineQueuePlugin | Data | Background sync and offline persistence | | versionHistory | Audit | Snapshots and state restoration | | dataValidation | Logic | Custom regex and range validation rules |

📄 License

Project is licensed under the MIT License. Build something amazing!

Developed with ❤️ by Ahmed Niazy Elsolya