# @arbocollab/arbo-plugin-item-table

<p align="center">
  <strong>A powerful and reusable Vue 3 component for displaying and managing item data in a feature-rich, infinite-scrolling table.</strong>
</p>

<p align="center">
  <img src="https://img.shields.io/badge/version-0.0.100-blue" alt="Version">
  <img src="https://img.shields.io/badge/vue-3.5.13-brightgreen" alt="Vue 3">
  <img src="https://img.shields.io/badge/ag--grid-34.3.1-orange" alt="AG Grid">
  <img src="https://img.shields.io/badge/license-private-red" alt="License">
</p>

This package provides the `<item-table>` component, a core UI element designed for the Arbo ecosystem. It is built on top of AG-Grid and offers a highly customized and performant solution for handling large datasets with features like infinite scroll, real-time updates, and inline editing.

---

## ✨ Key Features

| Feature                      | Description                                                                      |
| ---------------------------- | -------------------------------------------------------------------------------- |
| 🔄 **Infinite Scrolling**    | Efficiently handles large datasets by loading data in chunks as the user scrolls |
| 🎨 **Custom Cell Renderers** | Utilizes `@arbocollab/vue-ag-grid` for seamless Vue component integration        |
| 📦 **State Management**      | Logic cleanly separated into Vue Composables with Pinia store integration        |
| ⚡ **Real-time Ready**       | Includes mechanisms for refreshing data and responding to external changes       |
| 🔍 **Advanced Filtering**    | Built-in search, assignee filtering, and custom filter conditions                |
| ✏️ **Inline Editing**        | Supports inline editing with metric renderers and custom editors                 |
| 📊 **Bulk Operations**       | Bulk update, archive, unarchive, and delete functionality                        |
| 🖼️ **Asset Caching**         | Optimized image/icon caching with IndexedDB and base64 support                   |

---

## 📋 Prerequisites

This is a package within the `arbo-plugins` pnpm monorepo. Before you begin, ensure you have:

- [Node.js](https://nodejs.org/) v18.x or later
- [pnpm](https://pnpm.io/) v10.20.0 or later

---

## 🚀 Quick Start

### Installation

From the root of the monorepo:

```bash
pnpm install
```

### Development

```bash
# Run development server
pnpm --filter @arbocollab/arbo-plugin-item-table dev

# Run Storybook for component development
pnpm --filter @arbocollab/arbo-plugin-item-table storybook
```

### Build

```bash
# Build for production
pnpm --filter @arbocollab/arbo-plugin-item-table build

# Build Storybook
pnpm --filter @arbocollab/arbo-plugin-item-table build-storybook
```

### Quality Checks

```bash
# Linting
pnpm --filter @arbocollab/arbo-plugin-item-table lint

# Type checking
pnpm --filter @arbocollab/arbo-plugin-item-table check-types

# Format code
pnpm --filter @arbocollab/arbo-plugin-item-table format
```

---

## 📂 Project Structure

```
apps/dashboard/
├── src/
│   ├── item-table.vue          # Main Vue component
│   ├── composables/            # Vue Composables for business logic
│   │   ├── useItems.ts         # Item data fetching and management
│   │   ├── useItemTable.ts     # AG-Grid configuration and state
│   │   ├── useSceneAction.ts   # Scene action handlers
│   │   └── ...
│   ├── components/             # Sub-components
│   │   ├── BulkUpdate/         # Bulk operation components
│   │   ├── FilterBox/          # Filtering components
│   │   ├── Popup/              # Modal/popup components
│   │   └── ...
│   ├── stores/                 # Pinia stores
│   │   ├── bulkUpdateStore.ts  # Bulk update state management
│   │   ├── userStore.ts        # User state management
│   │   └── metricStore.ts      # Metric state management
│   └── index.ts                # Package exports
├── lib/                        # Build output
│   ├── index.es.js             # ES Module bundle
│   └── index.umd.js            # UMD bundle
├── vite.config.ts              # Vite dev configuration
├── vite.config.lib.ts          # Vite library build configuration
├── CHANGELOG.md                # Version history
└── package.json                # Package configuration
```

---

## 🛠️ Tech Stack

| Category             | Technology                                                            |
| -------------------- | --------------------------------------------------------------------- |
| **Framework**        | [Vue 3.5](https://vuejs.org/) (Composition API with `<script setup>`) |
| **Language**         | [TypeScript 5.5](https://www.typescriptlang.org/)                     |
| **Data Grid**        | [AG-Grid Community 34.3](https://www.ag-grid.com/)                    |
| **State Management** | [Pinia 3.0](https://pinia.vuejs.org/)                                 |
| **Build Tool**       | [Vite 5.1](https://vitejs.dev/)                                       |
| **HTTP Client**      | [Axios 1.13](https://axios-http.com/)                                 |
| **Date Handling**    | [Luxon 3.7](https://moment.github.io/luxon/)                          |
| **Documentation**    | [Storybook 10.1](https://storybook.js.org/)                           |

### Core Dependencies

- `@arbocollab/ag-grid-ui-components` - Shared UI component library
- `@arbocollab/vue-ag-grid` - Vue AG-Grid integration
- `api-services` - API service layer
- `types` - Shared TypeScript definitions

---

## 📦 Usage

### Basic Import

```typescript
import { ItemTable } from '@arbocollab/arbo-plugin-item-table';
```

### Component Usage

```vue
<template>
  <ItemTable
    :workspace-id="workspaceId"
    :entity-id="entityId"
    :item-ids="itemIds"
    @row-clicked="handleRowClick"
    @selection-changed="handleSelectionChange"
  />
</template>
```

---

## 🚢 Release Process

1. **Update version** in `package.json`
2. **Update CHANGELOG.md** with release notes
3. **Build the package**:
   ```bash
   pnpm --filter @arbocollab/arbo-plugin-item-table build
   ```
4. **Publish to registry**:
   ```bash
   cd apps/dashboard
   pnpm publish:lib
   ```

---

## 📝 Changelog

See [CHANGELOG.md](https://cdn.jsdelivr.net/npm/@arbocollab/arbo-plugin-item-table@beta/CHANGELOG.md) for a detailed list of changes in each release.

### Latest Release: v0.0.100 (2026-01-28)

- Enhanced caching logic for Icon and Visual components
- Improved EmptyData component messaging
- Refactored useRemoteFiles for streamlined caching
- Added tooltip directive integration

---

## 🔗 Related Packages

| Package                                                  | Description                   |
| -------------------------------------------------------- | ----------------------------- |
| [`@arbocollab/ag-grid-ui-components`](../../packages/ui) | Shared UI component library   |
| [`api-services`](../../packages/api-services)            | API service layer             |
| [`types`](../../packages/types)                          | Shared TypeScript definitions |

---

## 📄 License

Private - Internal use only within the Arbo ecosystem.
