React Table Compose

Package React permettant de créer facilement des tableaux Bootstrap avec des jeux de données
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Fields
  • Exemples

About The Project

React Table Compose , vous permettra de créer facilement un tableau avec Bootstrap , avec les champs des données directement formaté par rapport aux types de donner, mais aussi de permettre de créer directement un CRUD

Getting Started

Installation

$ yarn add https://github.com/alexandrebouttier/react-table-compose.git

Usage

import {ReactTableCompose} from 'react-table-compose';

   <ReactTableCompose
        dataset={depositsMoney}
        nameEntities='dépot'
        idCollection="depot_id" //default id
        deleteMethod={deleteDepotMoney}
        // Si deleteMethod à une fonction de suppresion ,
        // une modal de suppression ainsi qu'un bouton sera automatiquement créer 
        fields={[
          {
            name: 'Date',
            field: 'date',
            fieldType: 'date',
            options: {
              dateFormat: 'll',
            },
          },
          {
            name: 'Crypto',
            field: 'currency',
            fieldType: 'text',
            options: {
              upperCase: true,
            },
          },
          {
            name: 'Quantité',
            field: 'quantity',
            fieldType: 'number',
          },
          {
            name: 'Frais',
            field: 'fee',
            fieldType: 'number',
          },
          {
            name: 'Prix/Crypto',
            field: 'priceCoin',
            fieldType: 'number',
          },
          {
            name: 'Total',
            field: 'priceTotal',
            fieldType: 'price',
            options: {
              currency: '€',
              decimal: 2,
            },
          },
        ]}
      />

Basic parameters

<ReactTableCompose
        dataset={depositsMoney}
        // données 
        nameEntities='dépot'
        idCollection="depot_id" // default id
        // nom de l'entité 
        fields={[
          {
            name: 'Crypto',
            field: 'currency',
            fieldType: 'text',
            options: {
              upperCase: true,
            },
          },
          {
            name: 'Quantité',
            field: 'quantity',
            fieldType: 'number',
          },
        // Champs à afficher
        ]}
      />
/>

Fields

FieldText

options	type
upperCase	boolean
upperFirst	boolean
transformValue	array
prefix	string
maxLength	number

FieldPercentage

| options |null|

FieldDate

options	type
dateFormat	string ("LT","LTS","L","l","LL","ll","LLL","lll","LLLL","llll")

FieldNumber

options	type
decimal	number ("1,2,3,4,5,6")

FieldPrice

options	type
decimal	number ("1,2,3,4,5,6")
currency	string ("symbol currency")

FieldBadge

badge: {
   success: 'buy', // color => value
   danger: 'sell',
   },

options	type
badge	object

badges dispo :

primary secondary success danger warning info light dark

Exemples

export const ordersTypes = {
  market: 'Au marché',
  limit: 'Limite',
  take_profit_limit: 'Take profit limite',
};

export const ordersStatus = {
  closed: 'Fermer',
  canceled: 'Annuler',
  open: 'Ouvert',
};

  <ReactTableCompose
          dataset={ordersData}
          nameEntities='order'
          fields={[
            {
              name: 'Order id',
              field: 'id',
              fieldType: 'number',
            },
            {
              name: 'Date',
              field: 'datetime',
              fieldType: 'date',
              options: {
                dateFormat: 'll',
              },
            },
            {
              name: 'Achat/Vente',
              field: 'side',
              fieldType: 'badge',
              options: {
                badge: {
                  success: 'buy',
                  danger: 'sell',
                },
              },
            },
            {
              name: 'Type',
              field: 'type',
              fieldType: 'text',
              options: {
                transformValue: ordersTypes,
              },
            },
            {
              name: 'Symbol',
              field: 'symbol',
              fieldType: 'text',
              options: {
                upperCase: true,
              },
            },
            {
              name: 'Quantité',
              field: 'quantity',
              fieldType: 'number',
            },
            {
              name: 'Prix',
              field: 'price',
              fieldType: 'price',
              options: {
                currency: '$',
                decimal: 2,
              },
            },
            {
              name: 'Statut',
              field: 'status',
              fieldType: 'text',
              options: {
                transformValue: ordersStatus,
              },
            },
          ]}
        />