Skip to content

Package React permettant de créer facilement des tableaux Bootstrap avec des jeux de données

Notifications You must be signed in to change notification settings

alexandrebouttier/react-table-compose

Repository files navigation

Contributors Forks Stargazers Issues MIT License LinkedIn


Logo

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

Product Name Screen Shot

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,
              },
            },
          ]}
        />

About

Package React permettant de créer facilement des tableaux Bootstrap avec des jeux de données

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published