Package Exports

@saichandan181/reusable-grid
@saichandan181/reusable-grid/dist/index.esm.js
@saichandan181/reusable-grid/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@saichandan181/reusable-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 for intelligent data analysis.

Features

✅ Selectable rows with checkboxes
✅ Action buttons (view, edit, delete, AI assistant)
✅ AI-powered data analysis with Google Gemini
✅ Responsive design
✅ TypeScript support
✅ Customizable columns
✅ Row selection callbacks
✅ Custom cell rendering
✅ Unisys design system styling
✅ Accessibility compliant

Installation

npm install @unisys/reusable-grid

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 AI Assistant

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

Prop	Type	Default	Description
`columns`	`GridColumn[]`	required	Array of column definitions
`data`	`GridRow[]`	required	Array of data rows
`onRowSelect`	`(selectedIds: (string \| number)[]) => void`	optional	Callback when rows are selected
`onView`	`(row: GridRow) => void`	optional	Callback for view action
`onEdit`	`(row: GridRow) => void`	optional	Callback for edit action
`onDelete`	`(row: GridRow) => void`	optional	Callback for delete action
`onAI`	`(row: GridRow) => void`	optional	Callback for AI assistant action
`selectable`	`boolean`	`true`	Enable row selection with checkboxes
`showActions`	`boolean`	`true`	Show action buttons column
`className`	`string`	`''`	Additional CSS class name
`fontWeights`	`FontWeightConfig`	`{ header: 500, cell: 400 }`	Customize font weights for headers and cells

FontWeightConfig

Property	Type	Default	Description
`header`	`number \| string`	`500`	Font weight for header cells (100-900 or 'normal', 'bold')
`cell`	`number \| string`	`400`	Font weight for body cells (100-900 or 'normal', 'bold')

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

AIAssistant Props

Prop	Type	Default	Description
`row`	`GridRow`	required	The selected row data
`allData`	`GridRow[]`	required	Complete dataset for analysis
`apiKey`	`string`	required	Google Gemini API key
`onClose`	`() => void`	required	Callback when closing the assistant

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:

Update the version in package.json
Build the package: npm run build
Test the package locally: npm link
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 } from '@unisys/reusable-grid';

Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

Support

For issues and questions:

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

Changelog

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

@saichandan181/reusable-grid