npm package: @monarkmarkets/marketplace
Description: Marketplace component for Monark Markets
Latest version: 2.0.18

# @monarkmarkets/marketplace

A package of reusable React components for displaying pre-IPO company data and SPV investment opportunities.

## Installation

```bash
npm install @monarkmarkets/marketplace
```

## Peer Dependencies

This package expects compatible versions of the following to already exist in your app:

- `react` ^18.2.0 || ^19
- `react-dom` ^18.2.0 || ^19

The package bundles `@monarkmarkets/api-client@1.3.28` for its data fetching needs so you do not need to install it
separately.

## Features

- **Auto-fetching tables** - Tables that handle their own data fetching and pagination
- **Responsive design** - Clean, modern styling that works across devices
- **Customizable** - Configurable appearance and behavior

## Components

### PrimaryTable

Displays SPV investment opportunities with built-in data fetching from the SPV service.

```jsx
import {PrimaryTable} from '@monarkmarkets/marketplace';

function MyPage() {
    return (
        <PrimaryTable
            investorId="investor-123"
            buttonText="Invest"
            searchTerm="AI"
            onButtonClick={(companyId, investorId) => {
                // Handle button click
            }}
            onDataLoaded={(data, totalPages) => {
                // Handle data loaded event
            }}
        />
    );
}
```

### PrivateTable

Displays pre-IPO company information with built-in data fetching from the company service.

```jsx
import {PrivateTable} from '@monarkmarkets/marketplace';

function MyPage() {
    return (
        <PrivateTable
            investorId="investor-123"
            buttonText="Submit IOI"
            searchTerm="fintech"
            onButtonClick={(companyId, investorId) => {
                // Handle button click
            }}
            onDataLoaded={(data, totalPages) => {
                // Handle data loaded event
            }}
        />
    );
}
```

## Props

### Common Props (BaseTableProps)

| Prop          | Type                                            | Default                  | Description                          |
|---------------|-------------------------------------------------|--------------------------|--------------------------------------|
| investorId    | string                                          | (required)               | ID of the investor                   |
| onButtonClick | (companyId: string, investorId: string) => void | undefined                | Callback for button clicks           |
| buttonText    | string                                          | "Invest" or "Submit IOI" | Text to display on the action button |
| isLoading     | boolean                                         | false                    | External loading state               |
| initialPage   | number                                          | 1                        | Initial page to display              |
| pageSize      | number                                          | 10                       | Number of items per page             |
| searchTerm    | string                                          | ''                       | Search term to filter results        |
| onPageChange  | (page: number) => void                          | undefined                | Callback for page changes            |

### PrimaryTable Props

| Prop         | Type                                                    | Default   | Description                  |
|--------------|---------------------------------------------------------|-----------|------------------------------|
| onDataLoaded | (data: IPreIPOCompanySPV[], totalPages: number) => void | undefined | Callback when data is loaded |

### PrivateTable Props

| Prop         | Type                                                 | Default   | Description                  |
|--------------|------------------------------------------------------|-----------|------------------------------|
| onDataLoaded | (data: IPreIPOCompany[], totalPages: number) => void | undefined | Callback when data is loaded |

## Example

Here's a complete example of using both tables in a marketplace page:

```jsx
import React, {useState} from 'react';
import {PrivateTable, PrimaryTable} from '@monarkmarkets/marketplace';

const MarketplacePage = () => {
    const [isLoading, setIsLoading] = useState(true);
    const [ioiSearchQuery, setIoiSearchQuery] = useState('');
    const [spvSearchQuery, setSpvSearchQuery] = useState('');

    const handleDataLoaded = () => {
        setIsLoading(false);
    };

    const handleIOIButtonClick = (companyId, investorId) => {
        // Navigate to company details
    };

    const handleSPVButtonClick = (companyId, investorId) => {
        // Navigate to SPV details
    };

    return (
        <div>
            <h1>Marketplace</h1>

            <div>
                <h2>Private Companies</h2>
                <input
                    type="text"
                    value={ioiSearchQuery}
                    onChange={(e) => setIoiSearchQuery(e.target.value)}
                    placeholder="Search companies..."
                />
                <PrivateTable
                    investorId="investor-123"
                    buttonText="Submit IOI"
                    searchTerm={ioiSearchQuery}
                    onButtonClick={handleIOIButtonClick}
                    onDataLoaded={handleDataLoaded}
                />
            </div>

            <div>
                <h2>SPV Opportunities</h2>
                <input
                    type="text"
                    value={spvSearchQuery}
                    onChange={(e) => setSpvSearchQuery(e.target.value)}
                    placeholder="Search SPVs..."
                />
                <PrimaryTable
                    investorId="investor-123"
                    buttonText="Invest"
                    searchTerm={spvSearchQuery}
                    onButtonClick={handleSPVButtonClick}
                    onDataLoaded={handleDataLoaded}
                />
            </div>
        </div>
    );
};
```

## Dependencies

- React 18.0+
- @monarkmarkets/api-client

## License

Copyright © 2025 Monark Markets. All rights reserved.