README.md 1.68 KB
Newer Older
1
# Developments
2

3

4
- [Widgets](#Widgets)
5 6
  - [ResponsiveTable](#responsivetable)
  - [Loader](#loader)
7 8


9

10
## Widgets
11

12
### ResponsiveTable
13

14
This widget is based on react-bootstrap-table2 (https://react-bootstrap-table.github.io/react-bootstrap-table2/) but adds responsiveness.
15

16
Columns can now be configured based on the size of the device as bootstrap does (xs, sm, md, lg)
17

18
Configuration:
19
```
20 21

 const columns = [{
22 23 24 25 26 27 28 29 30 31
    text: 'Proposal',
    dataField: 'name',        
    headerStyle: (column, colIndex) => {
        return { width: '50%', textAlign: 'center' };
    },
    responsiveHeaderStyle: {         
            xs : {width: '20%', textAlign: 'center' },
            sm : {width: '50%', textAlign: 'center' },
            md : {width: '70%', textAlign: 'center' },
            lg : {width: '90%', hidden : true, textAlign: 'center' }                
32
    }
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
 }]

 var pageOptions = {    
    showTotal : true,
    hidePageListOnlyOnePage : true,
    sizePerPageList: [ {
        text: '5', value: 5
      }, {
        text: '10', value: 10
      }, {
        text: 'All', value: data.length
      } ]
 };

 <ResponsiveTable
    keyField='id'
    data={data }    
    columns={columns}
    pageOptions={pageOptions}
    />

54 55 56

```

57
If there is no responsiveHeaderStyle then headerStyle will be used as default. If there is no the used screen size (xs, sm, md, lg) configured in the responsiveHeaderStyle attribute then headerStyle will be used by default.
58 59


60
### Loader
61

62
It informs users that data are still been loaded
63 64

```
65
import Loader from 'react-loader-advanced';
66

67
const message = <span>Loading list of authors</span>;
68

69 70 71
<Loader show={this.state.fetching} message={message}>
	<some components>
</Loader>
72 73 74 75 76

```