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.