es6-react-admin-lte

# The DataTable Component > ./src/js/components/table/data-table/ This component displays a (React Bootstrap Table)[http://allenfang.github.io/react-bootstrap-table/] with data passed-in-able from remote or local sources. ## Important Items - data-table.jsx - data-table-buttons.jsx ## Props __data__ * Required - _false_ * Data Type - _ARRAY of objects_ * Functionality - _An array of data to be displayed. This is the most important prop of the DataTable component; the whole reason for its existence!_ * Default - _[]_ __keyName__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A data item's property name that you want to be considered the true 'unique' value throughout the table's usage._ * Default - _'id'_ __formats__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _Takes an array of data that refers to data keys and sets the formatting process for them and their table column._ * Expected Data - ```json [{ item: 'property_name_reference' rename: 'New Column Header Title', width: '100px' // Width string, toType: (cell, row, extra, rowId) => { // Cell data // Row data // http://allenfang.github.io/react-bootstrap-table/docs.html#formatExtraData // Id # of row return 'New string or React Element with data'; } }] ``` * Default - _[]_ __loading__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Covers the table in a loading icon and blocks the table from interaction until the data is loaded proper._ * Default - _false_ __remote__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Tells the table to get rid of default data handling in favor of your own handlers for managing your remote data._ * Default - _false_ __serialize__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Serializes the data on your page to display starting from #1 to whatever length your data array is._ * Default - _false_ __pagination__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Allows pagination for the table._ * Default - _false_ __search__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Allows the table's filter-search to appear and be used._ * Default - _false_ __multiColumnSearch__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Allows the table's multi-column search to appear and be used._ * Default - _false_ __ignoreData__ * Required - _false_ * Data Type - _ARRAY of strings_ * Functionality - _An array of data object property names to be ignored and excluded from the table's display_ __insertByPage__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _Object that tells the table to insert data objects into the table's data list via an external page not relating to a table._ * Expected Data - ```json { readApi: '', action: (rowData, apiRoute, hiddenData, actionDetails) => { // DO STUFF WITH ROW DATA // DO STUFF WITH TABLE API DATA YOU ARE REFERENCING // DO STUFF WITH HIDDEN DATA list // DO STUFF WITH ACTION NAME, like "editing" } } ``` * Default - _N/A_ __sizePerPage__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _How many items are displayed ber data page_ * Default - _20_ __totalSize__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _Total size of data that has been passed to the table, or within the contents of the api mentioned through meta-data_ * Default - _0_ __page__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _Currently displaying page of the data to display._ * Default - _1_ __pageCount__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _Number of pages counted that hold the data in the table, or meta data passed from api that estimates the page count._ * Default - _0_ __onPageChange__ * Required - _false_ * Data Type - _FUNC_ * Functionality - _Optional function to something when you switch the page. Usually to switch the data table's page_ * Expected Data - ```json (page, sizePerPage) => { // DO STUFF } ``` __onSortChange__ * Required - _false_ * Data Type - _FUNC_ * Functionality - _Optional unction to cover your actions when sorting page data._ * Expected Data - ```json (sortName, sortOrder) => { // DO STUFF } ``` __onSearchChange__ * Required - _false_ * Data Type - _FUNC_ * Functionality - _Optional function to handle search / filter actions for table._ * Expected Data - ```json (searchText, colInfos, multiColumnSearch) => { // DO STUFF } ``` __onSizePerPageList__ * Required - _false_ * Data Type - _FUNC_ * Functionality - _Optional function to take when switching the data count to disply per page._ * Expected Data - ```json (sizePerPage) => { // DO STUFF } ``` __defaultSortOrder__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The default order that the table data is sorted by._ * Choices - * _'asc'_ * _'desc'_ * Default - _'asc'_ __hideSizePerPage__ * Required - _false_ * Data Type - _BOOL_ * Functionality - _Hides the size-per-page dropdown_ * Default - _true_ __addMoreButton__ * Required - _false_ * Data Type - _ELEMENT_ * Functionality - _A button element used to handle actions for calling more data, as opposed to paginating specifically_ __readApi__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A route to an API that can be called by child elements and generated elements within the table if you want to handle data changes for objects in the table connected to an API_ __noDataText__ * Required - _false_ * Data Type - _STRING_ * Functionality - _Text to display on table if there is no data_ * Default - _'- No Data Loaded -'_ __sizePerPageList__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The available page size options on the page-size dropdown list._ * Default - _[5, 10, 20, 50, 100]_ __Takes Children__ * Displays Inside - _Each table row, as the last row item_ ## Example ```javascript/jsx import DataTable from './src/js/components/table/data-table/data-table.jsx'; <DataTable data={[ { color: 'red', power: 'fire' }, { color: 'white', power: 'lightning' }, { color: 'blue', power: 'water' },, ]}, keyName: 'color', noDataText: 'What is color again?' /> ``` --- # The DataTableButton Component > ./src/js/components/table/data-table/ This component is a button (much like the name might suggest), that can be placed in, around, and with table components. it is used in the DataTable component in some instances, but can also be passed as a child to it that will display with every table row. ## Props __theme__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A bootstrap button class that changes the color of the icon_ * Default - _'btn-success'_ __icon__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A font-awesome icon class that gives the icon an image. Can be nullified with ''_ * Default - _'fa-close'_ __heading__ * Required - _false_ * Data Type - _STRING_ * Functionality - _Text to display on the button_ * Default - _'Remove'_ __prefab__ * Required - _false_ * Data Type - _STRING_ * Functionality - _You can input the name of a common button choice, and it will fill in all the minimum necessities for you._ * Choices - * _'delete'_ * _'edit'_ * _'view'_ * Default - _''_ __action__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _Takes a function that activates when the button is clicked. It sends back data about the row in the table, and other broad relevant data_ * Expected Data - ```json (tableRowData, extraTableData, buttonData) => { /* extraTableData = { apiRef: '', ignoredData: [''] } buttonData = { id: '', buttonType: '', disable: () => {} }; */ } ``` * Default - _N/A_ __ableDisable__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Allows the button to be disabled_ * Default - _false_ __disabledTheme__ * Required - _false_ * Data Type - _STRING_ * Functionality - _Bootstrap btn class theme to apply to button when disabled_ * Default - _' --- '_ __disabledHeading__ * Required - _false_ * Data Type - _STRING_ * Functionality - _Text to display on the button if / when it is disabled_ * Default - _' --- '_ __disabledIcon__ * Required - _false_ * Data Type - _STRING_ * Functionality - _Font-awesome icon class string to display on the button if / when it is disabled_ * Default - _' --- '_ ## Example ```javascript/jsx import DataTable from './src/js/components/table/data-table/data-table.jsx'; import DataTableButton from './src/js/components/table/data-table/data-table-button.jsx'; <DataTable data={[ { color: 'red', power: 'fire' }, { color: 'white', power: 'lightning' }, { color: 'blue', power: 'water' },, ]}, keyName: 'color', noDataText: 'What is color again?' > <DataTableButton key='0' prefab="delete" action={this.deleteItem} /> </DataTable> ```