Unisys Reusable Grid Component

A highly customizable and reusable grid/table component built with React and TypeScript, following the Unisys design system. Features an integrated AI Assistant powered by Google Gemini AND a lightweight RAG (Retrieval-Augmented Generation) system for efficient analysis of large datasets (1000+ rows).

🎯 What's New in v1.2.0

JsonRAG - Analyze Thousands of Rows Efficiently!

Traditional AI hits token limits at ~100 rows. JsonRAG solves this by using smart retrieval:

• ✅ Analyze 1000+ rows without token limits
• ✅ 25x more efficient (1.4K tokens vs 35K)
• ✅ Works with free Gemini API tier
• ✅ Local embeddings (no API calls needed)
• ✅ Fast semantic search

📖 Read the RAG Guide →

Features

• 🎯 RAG AI - Analyze large datasets (1000+ rows) efficiently (NEW in v1.2.0)
• ✅ Selectable rows with checkboxes
• ✅ Action buttons (view, edit, delete, AI assistant)
• ✅ AI-powered data analysis with Google Gemini
• ✅ Pagination, search, and sorting
• ✅ JSON data upload
• ✅ Responsive design
• ✅ TypeScript support
• ✅ Customizable columns
• ✅ Row selection callbacks
• ✅ Custom cell rendering
• ✅ Unisys design system styling
• ✅ Accessibility compliant

Installation

npm install @unisys/reusable-grid

or

yarn add @unisys/reusable-grid

Optional: AI Assistant Feature

To use the AI Assistant feature, install the Google Generative AI package:

npm install @google/generative-ai

Note: The AI Assistant feature requires a Google Gemini API key. Get your free API key from Google AI Studio.

Usage

Basic Grid

import React from 'react';
import { UnisysGrid } from '@unisys/reusable-grid';

const App = () => {
  const columns = [
    { key: 'groupName', header: 'Group Name', width: '200px' },
    { key: 'description', header: 'Description', width: '400px' },
    { key: 'version', header: 'Version', width: '300px' },
  ];

  const data = [
    {
      id: 1,
      groupName: 'Codecrushers',
      description: 'Lorem ipsum dolor sit amet, consectetur',
      version: '1.01, 1.02, 1.03, 1.04, 1.05, 2.0, 2.01, 2.02',
    },
    {
      id: 2,
      groupName: 'DevTeam',
      description: 'Another description here',
      version: '1.0, 2.0, 3.0',
    },
  ];

  const handleRowSelect = (selectedIds) => {
    console.log('Selected rows:', selectedIds);
  };

  const handleView = (row) => {
    console.log('View:', row);
  };

  const handleEdit = (row) => {
    console.log('Edit:', row);
  };

  const handleDelete = (row) => {
    console.log('Delete:', row);
  };

  return (
    <UnisysGrid
      columns={columns}
      data={data}
      onRowSelect={handleRowSelect}
      onView={handleView}
      onEdit={handleEdit}
      onDelete={handleDelete}
      selectable={true}
      showActions={true}
    />
  );
};

export default App;

With RAG AI (NEW - For Large Datasets)

Analyze 1000+ rows efficiently using Retrieval-Augmented Generation:

import React, { useState } from 'react';
import { UnisysGrid, JsonRAG } from '@saichandan181/reusable-grid';

const App = () => {
  const [showRAG, setShowRAG] = useState(false);
  const [data, setData] = useState([...]); // Your large dataset (500+ rows)

  return (
    <>
      <button onClick={() => setShowRAG(true)}>
        Analyze All Data with RAG
      </button>

      <UnisysGrid
        columns={columns}
        data={data}
        selectable={true}
        showActions={true}
      />

      {showRAG && (
        <JsonRAG
          data={data}                      // All 1000+ rows!
          apiKey={process.env.REACT_APP_GEMINI_API_KEY}
          embeddingProvider="local"        // Free, runs in browser
          topK={20}                        // Retrieves top 20 relevant rows
          onClose={() => setShowRAG(false)}
        />
      )}
    </>
  );
};

export default App;

Benefits over traditional AI:

• ✅ No token limits (analyze 1000+ rows)
• ✅ 25x more efficient
• ✅ Works with free API tier
• ✅ Local embeddings (no extra API calls)

📖 Full RAG Documentation →

With AI Assistant (Legacy)

import React, { useState } from 'react';
import { UnisysGrid, AIAssistant } from '@unisys/reusable-grid';

const App = () => {
  const [selectedRow, setSelectedRow] = useState(null);
  const [showAI, setShowAI] = useState(false);

  const columns = [
    { key: 'groupName', header: 'Group Name', width: '200px' },
    { key: 'description', header: 'Description', width: '400px' },
    { key: 'version', header: 'Version', width: '300px' },
  ];

  const data = [
    {
      id: 1,
      groupName: 'Codecrushers',
      description: 'Lorem ipsum dolor sit amet, consectetur',
      version: '1.01, 1.02, 1.03',
    },
    // ... more data
  ];

  const handleAI = (row) => {
    setSelectedRow(row);
    setShowAI(true);
  };

  return (
    <>
      <UnisysGrid
        columns={columns}
        data={data}
        onAI={handleAI}
        selectable={true}
        showActions={true}
      />
      {showAI && selectedRow && (
        <AIAssistant
          row={selectedRow}
          allData={data}
          apiKey="YOUR_GEMINI_API_KEY"
          onClose={() => setShowAI(false)}
        />
      )}
    </>
  );
};

export default App;

API Reference

UnisysGrid Props

FontWeightConfig

📖 For detailed font weight customization examples, see FONT_WEIGHT_GUIDE.md

JsonRAG Props (NEW in v1.2.0)

📖 See full RAG documentation and examples →

AIAssistant Props (Legacy)

Column Definition

interface GridColumn {
  key: string;              // Data key to display
  header: string;           // Column header text
  width?: string;           // Column width (e.g., '200px', '30%')
  render?: (value: any, row: GridRow) => React.ReactNode; // Custom cell renderer
}

Custom Cell Rendering

You can customize how cells are rendered using the render function:

const columns = [
  {
    key: 'status',
    header: 'Status',
    render: (value, row) => (
      <span className={`status-badge ${value}`}>
        {value.toUpperCase()}
      </span>
    ),
  },
];

Styling

The component comes with built-in Unisys design system styles. You can override styles by targeting the CSS classes:

• .unisys-grid-container - Main container
• .unisys-grid - Table element
• .unisys-grid-header - Table header
• .unisys-grid-row - Table row
• .unisys-grid-cell - Table cell
• .unisys-checkbox-container - Checkbox container
• .unisys-action-btn - Action button

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

Publishing

Before publishing, ensure you:

1. Update the version in package.json
2. Build the package: npm run build
3. Test the package locally: npm link
4. Update the repository URL in package.json

# Login to npm
npm login

# Publish the package
npm publish --access public

Security

Important: Never commit your Google Gemini API key to version control. Use environment variables:

const apiKey = process.env.REACT_APP_GEMINI_API_KEY;

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

TypeScript

This package includes TypeScript definitions. Import types as needed:

import type { 
  GridColumn, 
  GridRow, 
  UnisysGridProps,
  JsonRAGProps,
  UseRAGConfig,
  EmbeddingProvider
} from '@saichandan181/reusable-grid';

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

For issues and questions:

• GitHub Issues: Report a bug
• Email: support@unisys.com

Changelog

1.2.0 (Latest)

• 🎯 NEW: JsonRAG Component - Analyze 1000+ rows efficiently using Retrieval-Augmented Generation
• 🎯 NEW: useRAG Hook - Build custom RAG implementations
• 🎯 NEW: Vector Store & Embeddings - Lightweight, dependency-free semantic search
• 🎯 NEW: Local Embeddings - Free, browser-based embedding generation (no API calls)
• 🎯 NEW: Gemini Embeddings - Cloud-based embeddings for maximum accuracy
• ✨ Improved performance for large datasets (1000+ rows)
• ✨ Smart retrieval reduces token usage by 25x
• 📖 Comprehensive RAG documentation
• 🐛 Bug fixes and performance improvements

1.1.x

• Pagination components
• Search and filtering
• JSON data upload
• Enhanced grid features

1.0.0

• Initial release
• UnisysGrid component with selectable rows
• Action buttons (view, edit, delete, AI)
• AI Assistant integration with Google Gemini
• TypeScript support
• Accessibility features

License

MIT © Unisys Corporation