# react-charges-table > It is a Material UI based React Component that helps in maintaining Charges Tables. Latest version **1.0.17** (published 2018-10-11) · 0 weekly downloads ## Install ```sh npm install react-charges-table pnpm add react-charges-table yarn add react-charges-table bun add react-charges-table ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.17 | | Published | 2018-10-11 | | First published | 2018-05-22 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 8 | | Unpacked size | 312.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Maintainers | revanth0212 | ## Links - npm: https://www.npmjs.com/package/react-charges-table - Repository: https://github.com/revanth0212/react-charges-table - Homepage: https://revanth0212.github.io/react-charges-table/ - Issues: https://github.com/revanth0212/react-charges-table/issues - npm.io page: https://npm.io/package/react-charges-table ## Dependencies (8) - [ramda](https://npm.io/package/ramda.md) ^0.25.0 - [react](https://npm.io/package/react.md) 15.6.2 - [flow-bin](https://npm.io/package/flow-bin.md) ^0.72.0 - [react-dom](https://npm.io/package/react-dom.md) 15.6.2 - [render-if](https://npm.io/package/render-if.md) ^0.1.1 - [material-ui](https://npm.io/package/material-ui.md) ^0.20.1 - [string-mask](https://npm.io/package/string-mask.md) ^0.3.0 - [react-scripts](https://npm.io/package/react-scripts.md) 1.1.4 ## Recent versions - 1.0.17 (latest) — 2018-10-11 - 1.0.16 — 2018-09-18 - 1.0.15 — 2018-09-14 - 1.0.14 — 2018-09-12 - 1.0.13 — 2018-09-11 - 1.0.12 — 2018-08-28 - 1.0.11 — 2018-08-27 - 1.0.10 — 2018-08-27 - 1.0.9 — 2018-08-27 - 1.0.8 — 2018-06-14 - 1.0.7 — 2018-06-08 - 1.0.6 — 2018-06-08 - 1.0.5 — 2018-06-08 - 1.0.4 — 2018-05-24 - 1.0.3 — 2018-05-24 - … 3 more at https://npm.io/package/react-charges-table/versions ## README # react-charges-table It is a Material UI based React Component that helps in maintaining Charges Tables. Checkout the demo [here](https://revanth0212.github.io/react-charges-table/). # Installation npm install react-charges-table # Usage import ChargesTable from 'react-charges-table' { 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 `` which you can import like this: `import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'`. Check out [App.js](https://github.com/revanth0212/react-charges-table/blob/master/src/App.js) for example. # Props | Prop | Prop Type | Default Value | isRequired | Description | | -------------------- | ------------------------------ | -------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- | | `chargesConfig` | `Array` | [] | 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) => 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](https://www.npmjs.com/package/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` | 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. | --- _Source: https://npm.io/package/react-charges-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._