# @arbocollab/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>

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

- **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 integration of Vue components as cell renderers and editors.
- **State Management with Composables**: Logic is cleanly separated into Vue Composables for managing items, table state, and forms.
- **Real-time Ready**: Includes mechanisms for refreshing data and responding to external changes.

## Prerequisites

This is a package within the `arbo-plugins` pnpm monorepo. Before you begin, ensure you have the following installed at the root of the repository:

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

## 🚀 Development & Usage

As a package within a monorepo, commands are typically run from the root directory.

1.  **Install Dependencies:**
    From the root of the monorepo, run:

    ```bash
    pnpm install
    ```

2.  **Build the Package:**
    To build this specific package for production:

    ```bash
    # This command runs the "build" script in this package's package.json
    pnpm --filter @arbocollab/item-table build
    ```

3.  **Run Storybook:**
    To view and develop this component in isolation, run the root Storybook command:

    ```bash
    pnpm storybook
    ```

4.  **Linting:**
    To run the linter and check for code quality:
    ```bash
    pnpm --filter @arbocollab/item-table lint
    ```

## 📂 Project Structure

Here is a brief overview of the key files in this package:

```
.
├── src/
│   ├── item-table.vue      # The main Vue component.
│   ├── composables/        # Vue Composables for business logic.
│   │   ├── useItems.ts     # Logic for fetching and managing item data.
│   │   ├── useItemTable.ts # Logic for AG-Grid configuration and state.
│   │   └── ...
│   └── index.ts            # Main entry point for the package exports.
├── vite.config.ts          # Vite configuration for the build process.
└── package.json            # Package dependencies and scripts.
```

## 🛠️ Tech Stack

- **Framework**: [Vue 3](https://vuejs.org/) (Composition API)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Data Grid**: [AG-Grid](https://www.ag-grid.com/)
- **Build Tool**: [Vite](https://vitejs.dev/)
- **Core Dependencies**:
  - `@arbocollab/ag-grid-ui-components`
  - `@arbocollab/vue-ag-grid`
- **Monorepo Tools**: [pnpm](https://pnpm.io/) & [Turborepo](https://turbo.build/repo)
