Veaser Library

A comprehensive React component library for Veaser projects.

Features

• ✅ DataTable with sorting, filtering, and pagination
• ✅ Editable cells with validation and error handling
• ✅ Form components (Input, Select, Checkbox, Button)
• ✅ Complete icon library
• ✅ Utility components
• ✅ Consistent styling across all Veaser applications
• ✅ TypeScript support
• ✅ Customizable themes

Installation

npm install veaser-lib
# or
yarn add veaser-lib

Basic Usage

import React from 'react';
import { DataTable } from 'veaser-lib';
import 'veaser-lib/dist/styles/index.css';

const App = () => {
  const data = [
    { id: 1, name: 'John Doe', age: 28, email: '[email protected]' },
    { id: 2, name: 'Jane Smith', age: 32, email: '[email protected]' },
    { id: 3, name: 'Bob Johnson', age: 45, email: '[email protected]' },
  ];
  
  const columns = [
    { key: 'name', header: 'Name', sortable: true, filterable: true },
    { key: 'age', header: 'Age', sortable: true, filterable: true },
    { key: 'email', header: 'Email', sortable: true, filterable: true },
  ];

  return (
    <div>
      <h1>Users</h1>
      <DataTable initialData={data} columns={columns} />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialData | Array | [] | The data to display in the table | | columns | Array | [] | Column configuration | | onSelectionChange | Function | - | Callback for row selection changes | | rowStyles | Function | - | Function to apply custom styles to rows | | cellStyles | Function | - | Function to apply custom styles to cells | | expandedComponent | Function | - | Component to render when a row is expanded | | actionLinks | Array | [] | Action links for rows | | idField | String | 'id' | Field to use as unique identifier | | addButtonLink | String | '' | Link for the "Add New" button | | addButtonText | String | 'Add New' | Text for the "Add New" button | | defaultActions | Object | { enabled: true } | Configure default actions (edit, duplicate, delete) | | renderLink | Function | - | Custom link renderer | | icons | Object | - | Custom icon provider | | components | Object | - | Custom UI components | | editableConfig | Object | - | Configure editable cells |

Column Configuration

const columns = [
  { 
    key: 'name',          // Property name in data object
    header: 'Name',       // Column header text (or a function returning JSX)
    sortable: true,       // Enable sorting (default: false)
    filterable: true,     // Enable filtering (default: false)
    fixed: false,         // Pin column (default: false)
    width: '200px',       // Column width
    editable: true,       // Make this cell editable (default: false)
    cell: (row) => <a href={`/users/${row.id}`}>{row.name}</a> // Custom cell renderer
  },
];

Editable Cells

The DataTable component now supports editable cells, allowing users to click on a cell to edit its content directly:

<DataTable
  initialData={data}
  columns={[
    {
      key: 'name',
      header: 'Name',
      sortable: true,
      filterable: true,
      editable: true // Mark this column as editable
    },
    // More columns...
  ]}
  editableConfig={{
    enabled: true, // Enable editing functionality
    onCellChange: async (row, key, value) => {
      try {
        // Make API call to update the data
        await api.updateItem(row.id, { [key]: value });
        
        // Update local state if needed
        setData(prevData => 
          prevData.map(item => 
            item.id === row.id ? { ...item, [key]: value } : item
          )
        );
        
        return true; // Return true on success
      } catch (error) {
        console.error('Failed to update:', error);
        return false; // Return false on failure
      }
    }
  }}
/>

EditableConfig Options

| Option | Type | Description | |--------|------|-------------| | enabled | Boolean | Enable/disable editable cells functionality | | onCellChange | Function | Callback function when a cell is edited, should return a Promise or boolean indicating success |

Customization

Custom UI Components

You can provide your own UI components to match your design system:

import { DataTable } from 'veaser-lib';
import { Button, Input, Select, Checkbox } from 'your-design-system';

const App = () => {
  return (
    <DataTable
      initialData={data}
      columns={columns}
      components={{
        Button: Button,
        Input: Input,
        Select: Select,
        Checkbox: Checkbox
      }}
    />
  );
};

Custom Icons

Provide your own icon system:

import { DataTable } from 'veaser-lib';
import { Icon } from 'your-icon-library';

const App = () => {
  return (
    <DataTable
      initialData={data}
      columns={columns}
      icons={{
        getIcon: (name, size, color) => <Icon name={name} size={size} color={color} />
      }}
    />
  );
};

Custom Link Rendering

Control how links are rendered:

import { DataTable } from 'veaser-lib';
import { Link } from 'react-router-dom';

const App = () => {
  return (
    <DataTable
      initialData={data}
      columns={columns}
      renderLink={(href, children) => <Link to={href}>{children}</Link>}
    />
  );
};

Row and Cell Styling

<DataTable
  initialData={data}
  columns={columns}
  rowStyles={(row) => {
    if (row.status === 'active') return { class: 'success' };
    if (row.status === 'pending') return { class: 'warning' };
    return undefined;
  }}
  cellStyles={(row, column) => {
    if (column === 'amount') return { class: 'money' };
    return undefined;
  }}
/>

Action Links

const actionLinks = [
  {
    label: 'View Details',
    href: (row) => `/users/${row.id}`,
    showAsButton: true,
    icon: 'eye-icon'
  },
  {
    label: 'Download PDF',
    onClick: (row) => handleDownload(row),
    showAsButton: false
  },
  {
    label: 'Delete Selected',
    batchAction: (selectedIds, selectedRows) => handleBatchDelete(selectedIds),
    showAsButton: true,
    icon: 'delete-icon'
  }
];

<DataTable
  initialData={data}
  columns={columns}
  actionLinks={actionLinks}
/>

Default Actions

<DataTable
  initialData={data}
  columns={columns}
  defaultActions={{
    enabled: true,
    edit: {
      enabled: true,
      onClick: (row) => handleEdit(row),
      batchEdit: (selectedIds, selectedRows) => handleBatchEdit(selectedIds)
    },
    duplicate: {
      enabled: true,
      onClick: (row) => handleDuplicate(row)
    },
    remove: {
      enabled: true,
      onClick: (row) => handleDelete(row),
      batchRemove: (selectedIds, selectedRows) => handleBatchDelete(selectedIds),
      confirmMessage: 'Are you sure you want to delete?'
    }
  }}
/>

Expandable Rows

<DataTable
  initialData={data}
  columns={columns}
  expandedComponent={(row) => (
    <div>
      <h3>Details for {row.name}</h3>
      <p>Additional information can go here...</p>
    </div>
  )}
/>

Development

1. Clone the repository
2. Install dependencies with npm install
3. Start development with npm run dev
4. Build with npm run build