Skip to content

Commit

Permalink
Add documentation for the table component
Browse files Browse the repository at this point in the history 
Closed #3
  • Loading branch information
@DavidePastore
DavidePastore committed Oct 8, 2017
1 parent 0073bd3 commit 80d93d3
Showing 1 changed file with 40 additions and 14 deletions.
54 changes: 40 additions & 14 deletions README.md
View file
Expand Up @@ -36,30 +36,56 @@ We have developed three components:
This component will read the CSV and show it in two different ways: as Map or as Table.
An example of usage could be:

```jsx
```js
<CsvDisplayer src={src} latFieldName='Lat' longFieldName='Lon' dataColumnName="Luogo" type="map" zoom="18" center={[40.36135,18.18825]}></CsvDisplayer>
```

#### Properties

| Name | Description | Required | Default | Type | Usage |
|----------------|---------------------------------------------------------------------------------------------------------------------------|----------|---------|------------------------------------|-----------|
| src | The source of the csv | yes | "" | String | map/table |
| delimiter | The delimiter of the csv | no | "auto" | String | map/table |
| type | The type of component to show | yes | "table" | String ("map"\|"table") | map/table |
| latFieldName | The name of the latitude field csv file | no | "Lat" | String | map |
| longFieldName | The name of the longitude field in the csv file | no | "Lon" | String | map |
| dataColumnName | The name of the field in the csv to show in the popup | no | "" | String | map |
| noHeader | If true won't load the headers of the csv, and in the map you will not be able to read latitude, longitude and other data | no | false | Boolean | map/table |
| zoom | The zoom of the map | no | false | Integer | map |
| center | The center position of the map | no | false | Object (ex. {[40.36135,18.18825]}) | map |
| caption | The text to add to the table as a caption | no | "" | String | table |
| showFoot | If true show the foot with the same column of the headers, otherwise doesn't show the foot | no | false | Boolean | table |
| Name | Description | Required | Default | Type | Usage |
|----------------|----------------------------------------------------------------------------------------------------------------------------|----------|---------|------------------------------------|-----------|
| src | The source of the csv | yes | "" | String | map/table |
| delimiter | The delimiter of the csv | no | "auto" | String | map/table |
| type | The type of component to show | yes | "table" | String ("map"\|"table") | map/table |
| latFieldName | The name of the latitude field csv file | no | "Lat" | String | map |
| longFieldName | The name of the longitude field in the csv file | no | "Lon" | String | map |
| dataColumnName | The name of the field in the csv to show in the popup | no | "" | String | map |
| noHeader | If true won't load the headers of the csv, and in the map you will not be able to read latitude, longitude and other data. | no | false | Boolean | map/table |
| zoom | The zoom of the map. | no | false | Integer | map |
| center | The center position of the map. | no | false | Object (ex. {[40.36135,18.18825]}) | map |
| caption | The text to add to the table as a caption. | no | "" | String | table |
| showFoot | If true show the foot with the same column of the headers, otherwise doesn't show the foot. | no | false | Boolean | table |

### Table

The table shows the data passed using the parameters.
The component is the one required [here](https://github.com/italia/daf-dataportal-public/issues/3).

An example of usage could be:

```js
let headers = ['Col-1', 'Col-2', 'Col-3'];
let rows = [{
'Col-1': 'Cella 1',
'Col-2': 'Cella 2'
}];
let caption = 'The caption';
let showFoot = true;
let noHeader = false;

<CsvTable headers={headers} rows={rows} caption={caption} showFoot={showFoot} noHeader={noHeader}></CsvTable>
```

### Properties

| Name | Description | Required | Default | Type |
|----------|--------------------------------------------------------------------------------------------|----------|------------------|------------------|
| rows | The list of rows to display | no | [] (empty array) | Array of Objects |
| headers | The list of headers | no | [] (empty array) | Array of String |
| noHeader | If tru hide the header | no | false | Boolean |
| caption | The text to add to the table as a caption | no | "" | String |
| showFoot | If true show the foot with the same column of the headers, otherwise doesn't show the foot | no | false | Boolean |


[ico-travis]: https://travis-ci.org/DavidePastore/daf-dataportal-public.svg?branch=csv-table
[ico-codecov]: https://codecov.io/gh/DavidePastore/daf-dataportal-public/branch/csv-table/graph/badge.svg
Expand Down

0 comments on commit 80d93d3

Please sign in to comment.