Tablo

Display a list of products.

Installation

// with npm
npm install @b2bfinance/tablo

// with yarn
yarn add @b2bfinance/tablo

Usage

import React from "react";
import ReactDOM from "react-dom";
import { EmbedWrapper } from "@b2bfinance/tablo";

function App() {
  const noOp = () => {};

  return (
    <EmbedWrapper
      products={[]}
      productsLimit={10}
      filters={[]}
      cta={"Get Deal"}
      ribbonText={"Hot"}
      onMoreDetails={noOp}
      onApply={noOp}
      onFilter={noOp}
    />
  );
}

ReactDOM.render(
  <App />,
  document.querySelector("#element-to-render-products-into")
);

Theme Options

You can use style overrides from mui. Tablo named components are as follows:

TabloProductHeadingRow
TabloProductWrapper
TabloProductList
TabloProductListEmpty
TabloProductColumns
TabloProductFeaturePoint
TabloProductMoreInfoHeader
TabloProductMoreInfoBody
TabloProductMoreInfoFooter