Goten List
Goten List is a React component that helps avoid boilerplate when creating tables.
- GotenList will control the items in its Table, so you can forget about managing certain lifecycle methods you would normally need.
- GotenList provides an array of buttons, which you can customize and define functions for
- Currently, it shows inspect, edit, and delete buttons.
Index
Install
npm install -s goten-react-list
Usage
var GotenList = GotenForm; // ES5import GotenList from 'goten-react-list'; // ES6...<GotenList=/>...{thisref}
Example of use
import React Component from 'react' import GotenList from 'goten-react-list' { return <React.Fragment> <button =>thispropschildren</button> ...other stuff like modals images etc </React.Fragment> }const gotenListRef = 'gotenListRef' { return <div> <GotenList ='All components' ='Actions actives' //= = = = /* , = */ = /> <div> <input ="submit" ="add item" = /> </div> </div> }
Props
Prop Name | Type | Default | Required | Description |
---|---|---|---|---|
onRemove | Function | false | This function is executed when the remove icon of the item is pressed. | |
removeIconColor | String | black | false | Color of the remove icon. |
customRemoveButton | Component | undefined | false | Component to use instead of the default remove button. See the example to learn how to use it. |
onEdit | Function | false | This function is executed when the edit icon of the item is pressed. | |
editIconColor | String | black | false | Color of the edit icon. |
customEditButton | Component | undefined | false | Component to use instead of the default edit button. See the example to learn how to use it. |
onSearch | Function | false | This function is executed when the search icon of the item is pressed. | |
searchIconColor | String | black | false | Color of the search icon. |
customSearchButton | Component | undefined | false | Component to use instead of the default search button. See the example to learn how to use it. |
title | Array/String | false | Title of the columns. | |
actionsTitle | String | false | Title of the actions column (the last one). | |
mergeColumns | boolean | false | false | Merge void columns. |
alignItems | String | left | false | Align prop for the table. |
width | String | 100% | false | Width prop for the table. |
uniqueKey | String | GotenListKey_ | false | UniqueKey will be used for create all keys of the items in the table. |
useComponentAsRow | Boolean | false | false | useComponentAsRow is used to pass a Component as a row. This component should render "td"s only (no need to use "tr"), with whatever it is you want to render inside each column. You can use React.Fragment to encapsulate these "td"s. |
Methods
- addItem(COMPONENT, OBJECT_OF_ACTIONS)
This method receives a component or an array of components. You can also pass an object as a second parameter to define the action methods of the specific item (it overrides the ones passed to GotenList). Once this method is executed, the component is added to the list.
- addItemIteratively(COMPONENT, NUMBER_OF_ITERATION, OBJECT_OF_ACTIONS)
Same as addItem, but you can specify the number of iterations to add the component a certain amount of times.
- removeItems
This method removes all items from the list. (removeItems()).
Contributions
To contribute to this package, we use the following workflow:
- Add an issue with related tags to describe the contribution (is it a bug? a feature request?).
- Branch your solution from develop, naming it like
#<issue_number>-<descriptive_name>
. - Send a pull request and wait for approval/corrections.