Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table rowgroups #393

Merged
merged 23 commits into from
Jun 18, 2018
Merged

Table rowgroups #393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4a79011
docs(table): reorganize stories into more categories
fczuardi Jun 13, 2018
0401009
docs(table): add story with the expected API for row groups
fczuardi Jun 13, 2018
d2ad874
feat(table): render nested rows with a parent row
fczuardi Jun 13, 2018
c37e2a9
feat(table): change selection background color and add different back…
fczuardi Jun 13, 2018
7e1d62e
chore(table): include button dependency
fczuardi Jun 14, 2018
48b5cd8
feat(table): implement expandable groups and row buttons
fczuardi Jun 14, 2018
d9632ba
feat(table): change arrow icon from down to up when user expand a group
fczuardi Jun 14, 2018
bc286af
chore(pre-commit): update prettier version
fczuardi Jun 15, 2018
d0391d5
fix(table): fix row selection and select/unselect all for tables with…
fczuardi Jun 15, 2018
9530fa8
docs(table): add story with selection header and row groups
fczuardi Jun 15, 2018
02540e4
test(table): fix failing test that used old selected rows key format …
fczuardi Jun 15, 2018
0a2e987
style(table): just separated tests into categories, no other change
fczuardi Jun 15, 2018
1577bd4
test(table): tests the expand/collapse toggle on tables with subrows
fczuardi Jun 15, 2018
3bff390
feat(table): new property for describing which groups to ungroup
fczuardi Jun 15, 2018
01af33d
refactor(table): simplify an array item extraction
fczuardi Jun 15, 2018
7687454
test(table): new story to test data append after mount
fczuardi Jun 15, 2018
293dea5
test(table): test if updated data props continues sending correct sel…
fczuardi Jun 15, 2018
197d577
fix(table): update rowsMap after prop data update
fczuardi Jun 15, 2018
cc23868
refactor(table): keep all dom nodes rendered, hide collapsed rows wit…
fczuardi Jun 18, 2018
c06a677
fixup! feat(table): change selection background color and add differe…
fczuardi Jun 18, 2018
9321b88
refactor(table): use array.includes instead of indexOf
fczuardi Jun 18, 2018
8ac57dd
feat(table): include blue corner icon after checkbox on grouped rows
fczuardi Jun 18, 2018
482ea00
test(snapshots): update
fczuardi Jun 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .pre-commit-config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
fail_fast: true
repos:
- repo: https://github.com/prettier/prettier
sha: '1.7.0'
# see https://github.com/prettier/prettier/issues/4637#issuecomment-396475333
sha: '1.12.1'
hooks:
- id: prettier

Expand Down
5 changes: 5 additions & 0 deletions .storybook/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,10 @@ injectGlobal`
content: "\\e942";
}

.wg-small-arrow-top:before {
content: "\\e945";
}

.wg-search:before {
content: "\\e941";
}
Expand Down Expand Up @@ -137,6 +141,7 @@ injectGlobal`
.wg-place,
.wg-external-link,
.wg-small-arrow-bottom,
.wg-small-arrow-top,
.wg-search,
.wg-close-int,
.wg-purveyor,
Expand Down
49 changes: 28 additions & 21 deletions packages/table/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ npm install @crave/farmblocks-table
```javascript
import React, { Component } from "react";
import { render } from "react-dom";
import {Table, Column} from "@crave/farmblocks-table";
import { Table, Column } from "@crave/farmblocks-table";

const root = document.createElement("div");
document.body.appendChild(root);
Expand All @@ -27,10 +27,10 @@ const fruits = [

render(
<div>
<Table data={fruits}>
<Column title="Fruit" text={row => row.name} />
<Column title="Price" text={row => row.price} />
</Table>
<Table data={fruits}>
<Column title="Fruit" text={row => row.name} />
<Column title="Price" text={row => row.price} />
</Table>
</div>,
root
);
Expand All @@ -43,34 +43,41 @@ See the stories source code for more usage examples.
This package assumes that the application using it uses a font icon that have a
checkmark symbol, and that the class name to include that icon is `.wg-check`.

### Required Polyfills

This package assumes it will run on an enviroment that has support for Array.includes and Object.keys, if you need to support IE and other older browsers, make sure you have those polyfills in place.

## Properties

The Table component can be used for showing data grids using text cells in like the simple example above, but it also supports
complex rendering inside the cells using the ``customCell`` property. The idea is to describe the columns using the Column component and map the data to columns in any way you choose using functions. The ``data`` property of the Table component is the
complex rendering inside the cells using the `customCell` property. The idea is to describe the columns using the Column component and map the data to columns in any way you choose using functions. The `data` property of the Table component is the
core of the whole thing, it should be an array of objects, each item representing a row of the table.

### Table

| property | type | description |
| -------- | ------ | ------------------------------------------------- |
| data | array of objects | the data to be presented in a data table, each item should represent a row |
| selectableRows | boolean | if set, will make the rows selectable by displaying checkboxes on the first column |
| selectionHeader | function ``(selectedRows, clearFunction) => React.node`` | a function that receives an array of selected rows data plus a function to clear selection; and should return a react node to be rendered as an action bar on top of the table, there is a helper component SelectionBar that can be used as the return of this function, or you can create your own... see the stories files for usage examples |
| width | string | use this to manually change the width of the table |
| rowHeight | string | use this to manually change the height of the body rows of the table, the package exports a set of named values as ``rowHeights``, you can import them and use ``rowHeights.SMALL`` to have a more compact table |
| onTitleClick | function ``(columnIndex, data) => any`` | when the option ``clickable`` is used on the Column children, that column title will be a link and will have the ``wg-arrow-down`` icon displayed, upon click such columns will trigger the function you provide in this property, it will be called with 2 arguments, the index of the clicked column from left to right and the whole table data |
| children | React nodes | the table comopnent expect Column children that describes how to interpret and render the table data on each column for all rows |
| property | type | description |
| ------------------ | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| data | array of objects | the data to be presented in a data table, each item should represent a row |
| selectableRows | boolean | if set, will make the rows selectable by displaying checkboxes on the first column |
| selectionHeader | function `(selectedRows, clearFunction) => React.node` | a function that receives an array of selected rows data plus a function to clear selection; and should return a react node to be rendered as an action bar on top of the table, there is a helper component SelectionBar that can be used as the return of this function, or you can create your own... see the stories files for usage examples |
| width | string | use this to manually change the width of the table |
| rowHeight | string | use this to manually change the height of the body rows of the table, the package exports a set of named values as `rowHeights`, you can import them and use `rowHeights.SMALL` to have a more compact table |
| rowGroupKey | string | if you have rows that contains sub-rows as a list under a key, you can pass this property with the name of the key, to have a table with row groups generated |
| flatGroupCondition | function `(row) => boolean` | if you need to display some row groups as regular rows, use a function to describe in which conditions a rowgroup should be flattened |
| collapsed | boolean | if row groups are used, this flag will add a button column with buttons that works as expand/collapse toggle on the start of row groups. The groups will start collapsed. |
| onTitleClick | function `(columnIndex, data) => any` | when the option `clickable` is used on the Column children, that column title will be a link and will have the `wg-arrow-down` icon displayed, upon click such columns will trigger the function you provide in this property, it will be called with 2 arguments, the index of the clicked column from left to right and the whole table data |
| children | React nodes | the table comopnent expect Column children that describes how to interpret and render the table data on each column for all rows |

### Column

Columns are components that describes what data should be rendered in a column, as well as the name of the column, the two most important properties are ``title``, that is the text name for the column and ``text`` that is a function that receives a full row and should return the text value to print on the cells of the column. If the simple text values and text properties (``fontType``) are not enough, you can use functions that returns React nodes instead in the ``customTitle`` and ``customCell`` properties.
Columns are components that describes what data should be rendered in a column, as well as the name of the column, the two most important properties are `title`, that is the text name for the column and `text` that is a function that receives a full row and should return the text value to print on the cells of the column. If the simple text values and text properties (`fontType`) are not enough, you can use functions that returns React nodes instead in the `customTitle` and `customCell` properties.

Other properties:
Other properties:

- ``clickable``, a flag to make the column title clickeable
- ``width``, to manually set the column width
- ``align``, ``left`` or ``right`` for a particular column
- ``fontType``, one of the available font types in farmblocks-theme, will work only for ``text`` columns, not ``customCell``
* `clickable`, a flag to make the column title clickeable
* `width`, to manually set the column width
* `align`, `left` or `right` for a particular column
* `fontType`, one of the available font types in farmblocks-theme, will work only for `text` columns, not `customCell`

## License

Expand Down
7 changes: 3 additions & 4 deletions packages/table/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@
"author": "Crave Food Systems and AUTHORS",
"license": "MIT",
"main": "lib/index.js",
"files": [
"AUTHORS",
"lib"
],
"files": ["AUTHORS", "lib"],
"publishConfig": {
"access": "public"
},
Expand Down Expand Up @@ -38,11 +35,13 @@
"styled-components": "^3.0.2"
},
"dependencies": {
"@crave/farmblocks-button": "^4.0.2",
"@crave/farmblocks-input-checkbox": "^1.2.4",
"@crave/farmblocks-link": "^2.2.1",
"@crave/farmblocks-text": "^1.1.9",
"@crave/farmblocks-theme": "^1.5.1",
"object.values": "^1.0.4",
"polished": "^1.9.2",
"react-addons-css-transition-group": "^15.6.2"
},
"devDependencies": {
Expand Down
Loading