# simple-react-treetable > A React component that presents a simple TreeTable, allowing the user to supply styling and rendering options. Latest version **1.0.3** (published 2018-11-19) · MIT license · 0 weekly downloads ## Install ```sh npm install simple-react-treetable pnpm add simple-react-treetable yarn add simple-react-treetable bun add simple-react-treetable ``` ## 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.3 | | Published | 2018-11-19 | | First published | 2018-11-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 22.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Maintainers | truedub | ## Links - npm: https://www.npmjs.com/package/simple-react-treetable - Repository: https://github.com/truedub/simple-react-treetable - Issues: https://github.com/truedub/simple-react-treetable/issues - npm.io page: https://npm.io/package/simple-react-treetable ## Dependencies (5) - [prop-types](https://npm.io/package/prop-types.md) ^15.6.2 - [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.0.0 - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.3 - [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.8 - [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.5.0 ## Recent versions - 1.0.3 (latest) — 2018-11-19 - 2.0.0-prerelease.2 — 2019-01-10 - 2.0.0-prerelease.1 — 2019-01-09 - 2.0.0-prerelease.0 — 2019-01-09 - 1.0.2 — 2018-11-19 - 1.0.1 — 2018-11-19 - 1.0.0 — 2018-11-15 - 0.9.1 — 2018-11-15 - 0.9.0 — 2018-11-15 - 0.3.0 — 2018-11-13 - 0.2.0 — 2018-11-13 ## README # simple-react-treetable A React component that presents a simple TreeTable, allowing the user to supply styling and rendering options. ## Installation Run the following command: `npm install simple-react-treetable --save` or `yarn add simple-react-treetable --save` ## Usage Firstly, import the component as follows: `import SimpleTreeTable from "simple-react-treetable";` Then include it in your components as follows: `` See our [Demo page](https://truedub.github.io/simple-react-treetable/index.html) to see the component in action. SimpleTreeTable expects data in the following format: ```javascript [ { data: { name: "name0", dataType: "string0", example: "ex0", description: "desc0" }, children: [ { data: { name: "name0-0", dataType: "string0-0", example: "ex0-0", description: "desc0-0" }, children: [] }, { data: { name: "name0-1", dataType: "string0-1", example: "ex0-1", description: "desc0-1" }, children: [] }, { data: { name: "name0-2", dataType: "string0-2", example: "ex0-2", description: "desc0-2" }, children: [ { data: { name: "name0-2-1", dataType: "string0-2-1", example: "ex0-2-1", description: "desc0-2-1" }, children: [] } ] } ] }, { data: { name: "name1", dataType: "string1", example: "ex1", description: "desc1 € €" }, children: [] }, { data: { name: "name2", dataType: "string2", example: "ex2", description: "desc2 € € € €" }, children: [] } ] ``` ### Configuration options Obviously, the tableData prop is required. There is one other required prop: **columns** is an array of objects, describing the columns to be rendered. The options within a column object are: | Attribute Name | Type | Description | Example | Required | | -------------- | ---- | ----------- | ------- | -------- | | dataField | String | the field that holds the data to be displayed | name | Yes | | heading | String | the column header to be used - if not supplied, the dataField is used instead. | Name | No | | fixedWidth | Boolean | Should the column be defined with a fixed width? | false | No | | percentageWidth | Number | The percentage width this column will be allocated, should fixedWidth be true | 25 | No | | styleClass | String | A CSS class to be applied to the TD element for this field | whatever | No | | renderer | function | A function to be applied to the data - see further detail below | whatever | No | Further control of how the table is displayed can be provided using the **control** prop. | Attribute Name | Type | Description | Example | Required | | -------------- | ---- | ----------- | ------- | -------- | | tableClasses | String | CSS class(es) to be applied to the table. See the styling section for more information. | | No | | showButton | Boolean | Should the Expand All/Collapse All button be displayed? | False | No | | buttonClasses | String | CSS classes to be applied to the button, if displayed | | No | #### Rendering option A function can be provided on a per-column basis to control the display of the data from that column. This function should accept 2 parameters: 1. dataRow - the entire row of data being operated on 2. dataField - the name of the field within that row to be displayed Thus the actual data for the column will be provided as `dataRow.data[dataField]` The function should return HTML - see the example below: ````javascript let descriptionRenderer = function (dataRow, dataField) { return }; ```` #### Styling options The table is by default entirely unstyled. To style it, simply provide a string of class names (separated by spaces) in the `control.tableClasses` prop. For example, to use Bootstrap styling, you can pass "table table-bordered" to the prop, and assuming the Bootstrap CSS is available, the relevant styling will be applied. Note that Bootstrap table striping won't work on a table where rows are expandable, as the striping is applied once at render time and doesn't adjust to the display changing. ### Use as a simple DataTable To use this component as a simple datatable (i.e. no expandable capabilities), simply provide a `tableData` prop with no `children` attributes. ## Release History | Release | Description | Release date | | ------- | ----------- | ------------ | | 1.0.0 | Initial launch | Nov 15 2018 | | 0.9.1 | Second final pre-release candidate! | Nov 15 2018 | | 0.9.0 | Final pre-release candidate | Nov 15 2018 | | 0.3.0 | Another pre-release candidate | Nov 13 2018 | | 0.2.0 | Pre-release effort | Nov 12 2018 | --- _Source: https://npm.io/package/simple-react-treetable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._