2.5.0-alpha.fbdc2ca3 • Published 7 years ago

@crave/farmblocks-table v2.5.0-alpha.fbdc2ca3

Weekly downloads
8
License
MIT
Repository
github
Last release
7 years ago

Farmblocks Table

A component for rendering data tables.

Installation

npm install @crave/farmblocks-table

Usage

import React, { Component } from "react";
import { render } from "react-dom";
import { Table, Column } from "@crave/farmblocks-table";

const root = document.createElement("div");
document.body.appendChild(root);

const fruits = [
  { id: 0, name: "Apple", price: "$ 0.50" },
  { id: 1, name: "Banana", price: "$ 0.60" },
  { id: 2, name: "Cherry", price: "$ 9,999.99" },
  { id: 3, name: "Coconut", price: "$ 2.30" }
];

render(
  <div>
    <Table data={fruits}>
      <Column title="Fruit" text={row => row.name} />
      <Column title="Price" text={row => row.price} />
    </Table>
  </div>,
  root
);

See the stories source code for more usage examples.

Required Font icon

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 core of the whole thing, it should be an array of objects, each item representing a row of the table.

Table

propertytypedescription
dataarray of objectsthe data to be presented in a data table, each item should represent a row
selectableRowsbooleanif set, will make the rows selectable by displaying checkboxes on the first column
selectionHeaderfunction (selectedRows, clearFunction) => React.nodea 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
widthstringuse this to manually change the width of the table
rowHeightstringuse 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
rowGroupKeystringif 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
flatGroupConditionfunction (row) => booleanif you need to display some row groups as regular rows, use a function to describe in which conditions a rowgroup should be flattened
collapsedbooleanif 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.
onTitleClickfunction (columnIndex, data) => anywhen 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
childrenReact nodesthe table comopnent expect Column children that describes how to interpret and render the table data on each column for all rows
onRowClickfunctionuse this function to listen to row clicks. Please note that click on buttons or links also propagate the click until it reachs the row. To prevent this behaviour, you should call event.stopPropagation on the target element.

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.

Other properties:

  • clickable, a flag to make the column title clickeable
  • width, to manually set the column width
  • align, any valid CSS text-align value. Default: "left"
  • whiteSpace, any valid CSS white-space value. Default: "normal"
  • fontType, one of the available font types in farmblocks-theme, will work only for text columns, not customCell

License

MIT

6.1.9

4 years ago

6.1.8

5 years ago

6.1.5

5 years ago

6.1.4

5 years ago

6.1.3

5 years ago

6.1.2

5 years ago

6.0.3

5 years ago

6.0.2

5 years ago

6.0.1

6 years ago

6.0.0

6 years ago

5.0.12

6 years ago

5.0.11

6 years ago

5.0.10

6 years ago

5.0.9

6 years ago

5.0.8

6 years ago

5.0.7

6 years ago

5.0.6

6 years ago

5.0.5

6 years ago

5.0.4

6 years ago

5.0.3

6 years ago

5.0.2

6 years ago

5.0.1

6 years ago

5.0.0

6 years ago

4.4.0

6 years ago

4.3.2

6 years ago

4.3.1

6 years ago

4.3.0

6 years ago

4.2.8

6 years ago

4.2.7

6 years ago

4.2.6

6 years ago

4.2.5

6 years ago

4.2.4

6 years ago

4.2.3

6 years ago

4.2.2

7 years ago

4.2.1

7 years ago

4.2.0

7 years ago

4.1.1

7 years ago

4.1.0

7 years ago

4.0.2

7 years ago

4.0.1

7 years ago

4.0.0

7 years ago

3.5.0

7 years ago

3.4.1

7 years ago

3.4.0

7 years ago

3.3.3

7 years ago

3.3.2

7 years ago

3.3.1

7 years ago

3.3.1-alpha.9

7 years ago

3.3.1-4211.1.8

7 years ago

3.3.1-4212.1.8

7 years ago

3.3.1-4209.1.8

7 years ago

3.3.1-4208.1.8

7 years ago

3.3.1-alpha.6

7 years ago

3.3.1-alpha.1

7 years ago

3.3.0

7 years ago

3.2.2-alpha.26

7 years ago

3.2.2-beta.22

7 years ago

3.2.2-alpha.22

7 years ago

3.2.2-alpha.0

7 years ago

3.2.2-alpha.1

7 years ago

3.2.1

7 years ago

3.2.1-alpha.48

7 years ago

3.2.1-alpha.49

7 years ago

3.2.1-alpha.47

7 years ago

3.2.1-alpha.10

7 years ago

3.2.1-alpha.1

7 years ago

3.2.0

7 years ago

3.1.3-alpha.1

7 years ago

3.1.2

7 years ago

3.1.2-alpha.7

7 years ago

3.1.2-alpha.6

7 years ago

3.1.1

7 years ago

3.1.1-alpha.5

7 years ago

3.1.0

7 years ago

3.0.11-alpha.9

7 years ago

3.0.10

7 years ago

3.0.9

7 years ago

3.0.8

7 years ago

3.0.7

7 years ago

3.0.6

7 years ago

3.0.5

7 years ago

3.0.4

7 years ago

3.0.3

7 years ago

3.0.2

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

2.4.6

7 years ago

2.4.5

7 years ago

2.4.4

7 years ago

2.4.3

7 years ago

2.4.2

7 years ago

2.4.1

7 years ago

2.4.0

7 years ago

2.3.11

7 years ago

2.3.10

7 years ago

2.3.9

7 years ago

2.3.8

7 years ago

2.3.7

7 years ago

2.3.6

7 years ago

2.3.5

7 years ago

2.3.4

7 years ago

2.3.3

7 years ago

2.3.2

7 years ago

2.3.1

7 years ago

2.3.1-alpha.30

7 years ago

2.3.0

7 years ago

2.2.0

7 years ago

2.1.2

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.3

7 years ago

2.0.2

8 years ago

2.0.1

8 years ago

2.0.0

8 years ago

1.4.7

8 years ago

1.4.6

8 years ago

1.4.5

8 years ago

1.4.4

8 years ago

1.4.3

8 years ago

1.4.2

8 years ago

1.4.1

8 years ago

1.4.0

8 years ago

1.3.5

8 years ago

1.3.4

8 years ago

1.3.3

8 years ago

1.3.2

8 years ago

1.3.1

8 years ago

1.3.0

8 years ago

1.2.10

8 years ago

1.2.9

8 years ago

1.2.8

8 years ago

1.2.7

8 years ago

1.2.6

8 years ago

1.2.5

8 years ago

1.2.4

8 years ago

1.2.3

8 years ago

1.2.2

8 years ago

1.2.1

8 years ago

1.2.0

8 years ago

1.1.10

8 years ago

1.1.9

8 years ago

1.1.8

8 years ago

1.1.7

8 years ago

1.1.6

8 years ago

1.1.5

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago