Skip to content

A Material UI based React Component that renders a table of charges and handles all the functionalities related to charges.

Notifications You must be signed in to change notification settings

revanth0212/react-charges-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-charges-table

It is a Material UI based React Component that helps in maintaining Charges Tables.

Checkout the demo here.

Installation

npm install react-charges-table

Usage

import  ChargesTable  from  'react-charges-table'

<ChargesTable
   ref={(node) => {
	  this.chargesTable = node
   }}
   chargesConfig={sampleData.chargesConfig}
   currencyCode="$"
   hideDivider={false}
   formatValue={(value) => Math.round(value)}
   listContainerStyle={{ minWidth: '350px', maxWidth: '500px', minHeight: '150px' }}
/>

Make sure your app is wrapped inside <MuiThemeProvider> which you can import like this: import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'.

Check out App.js for example.

Props

Prop Prop Type Default Value isRequired Description
chargesConfig Array<ChargesConfig> [] true Charges Config.
currencyCode string / Node '' false Currency code string or node that will be shown to the left of the charge field.
listContainerStyle Object {} false Will override default list container styling.
onChargeChange (updatedChargesConfig: Array<ChargesConfig>) => void () => [] false Will be called everytime a charge has been changed. Will be called with the updated charges config.
hideDivider boolean false false If set will hide the divider after each row.
dividerStyle Object {} false Will override the default divider styling.
formatValue (oldValue: number) => number (v: number): number => v false Will be called when a value has been changed. Has to return a number that will be used for setting the value of the charge.
totalLabel string Total false String that will be used as a label for the total field.
hideTotal boolean false false If set will hide the total field from the charges table.
totalFieldName string total false String that will be used as the name of the total object in the charges config.
mask string # false String that will be used to mask the value. For instance #.00 displays 12345 as 123.45 or $ #.00 displays 12345 as $ 123.45 For more information check out string-mask about how to write masks.
precision number 0 false Number that represents to what precision should the value be processed.

Functions

Function Name Function Type Description
getCharges () => Array<ChargesConfig> Returns the current list of charges.
getTotal () => number Returns the total.

You can find the type of ChargesConfig from the next section.

You have to call these functions using the ChargesTable's ref.

ChargesConfig

type  ChargeConfigType = {
    name: string,
    primaryText: string | Node,
    secondaryText?: string | Node,
    disabled?: boolean,
    value: number,
    chargeRowStyle?: Object,
    rootTextFieldStyle?: Object,
    chargeInputStyle?: Object,
}
Key Default Value isRequired Description
name '' true Unique value that will be used to identify the charge in the list.
disabled false false If set, will disable editing the charge.
primaryText '' true Text or Node that will be rendered as the charge's description.
secondaryText '' false Secondary Text or Node that will be rendered as the charge's description.
value 0 true Value of the charge.
chargeRowStyle {} false Override the default style of the charge row in the charges list.
rootTextFieldStyle {} false Override the inline-styles of the root text element.
chargeInputStyle {} false Override the inline-styles of the TextField's input element.

About

A Material UI based React Component that renders a table of charges and handles all the functionalities related to charges.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published