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. |