@monarkmarkets/marketplace NPM

@monarkmarkets/marketplace

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

Installation

npm install @monarkmarkets/marketplace

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.

import { PrimaryTable } from '@monarkmarkets/marketplace-components';

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.

import { PrivateTable } from '@monarkmarkets/marketplace-components';

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:

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

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>
  );
};