table

v4.15.0

STATUS

Passing

DOWNLOADS

169

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

N/A

Table head and contents

React

Table

UI Components

1 contributor

Install table as a package?

Copied

npm i @bit/segmentio.evergreen.table

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Table head and contents

Table body and contents

Composes the Pane component as the base.

Composes the TableCell component as the base.

Composes the Pane component as the base.

The height of the row. Remember to add paddings when using "auto".

Function that is called on click and enter/space keypress.

Makes the TableRow selectable.

Makes the TableRow selected.

Manually set the TableRow to be highlighted.

The intent of the alert.

The appearance of the table row. Default theme only support default.

Theme provided by ThemeProvider.

Class name passed to the table row. Only use if you know what you are doing.

Use React 16.3+ createContext API.

Function to help with focus management for selectable table cells.

Function to help with focus management for selectable table rows.

Properties

Name	Type	Default value	Description
isSelectable	`bool`	`true`
disabled	`bool`		When true, the cell can’t be edited.
placeholder	`node`		Optional placeholder when children is falsy.
size	`300 \| 400`	`300`	The size used for the TextTableCell and Textarea.
children	`string \| number`		This is the value of the cell.
onChange	`function`		Function called when value changes. (value: string) => void.
autoFocus	`bool`	`false`	When true, the cell will initialize in the editing state.
value (required)	`string`		Used as the defaultValue of the textarea.
zIndex (required)	`number`		The z-index placed on the element.
getTargetRef (required)	`function`		Function to get the target ref of the parent. Used to mirror the position.
minWidth	`number`	`80`	Min width of the textarea. The textarea can never be smaller than the cell.
minHeight	`number`	`40`	Min height of the textarea. The textarea can never be smaller than the cell.
onChangeComplete (required)	`function`		Called when the textarea is blurred, pass the value back to the cell.
onCancel (required)	`function`		Called when Escape is hit or componentWillUnmount.
size	`number`		Text size of the textarea.
handleScrollbarSize	`function`	`() => {}`	Returns the size of the scrollbar by creating a hidden fixed div.
value	`string`		The value of the input.
onChange	`function`	`() => {}`	Handler to be called when the input changes.
autoFocus	`bool`		Sets whether the component should be automatically focused on component render.
spellCheck	`bool`	`true`	Sets whether to apply spell checking to the content.
placeholder	`string`	`'Filter...'`	Text to display in the input if the input is empty.
icon	`string`	`'search'`	Icon to display in the input.
isSelectable	`bool`	`true`
disabled	`bool`		When true, the cell can’t be edited.
placeholder	`node`		Optional placeholder when children is falsy.
size	`300 \| 400`	`300`	The size used for the TextTableCell and Textarea.
selectMenuProps	`object`
isSelectable	`bool`
appearance	`string`	`'default'`	The appearance of the table row. Default theme only support default.
rightView	`node`		Optional node to be placed on the right side of the table cell. Useful for icons and icon buttons.
theme (required)	`object`		Theme provided by ThemeProvider.
arrowKeysOverrides	`{"up":"string \| function \| element \| false","down":"string \| function \| element \| false","left":"string \| function \| element \| false","right":"string \| function \| element \| false"}`		Advanced arrow keys overrides for selectable cells. A string will be used as a selector.
className	`string`		Class name passed to the table cell. Only use if you know what you are doing.
height	`number`	`32`	The height of the table head.
accountForScrollbar	`bool`	`true`	This should always be true if you are using TableHead together with a TableBody. Because TableBody has `overflowY: scroll` by default.
children	`node[] \| node`		Children needs to be an array of a single node.
defaultHeight	`number`	`48`	Default height of each row. 48 is the default height of a TableRow.
allowAutoHeight	`bool`	`false`	When true, support `height="auto"` on children being rendered. This is somewhat of an expirmental feature.
overscanCount	`number`	`5`	The overscanCount property passed to react-tiny-virtual-list.
estimatedItemSize	`number`		When passed, this is used as the `estimatedItemSize` in react-tiny-virtual-list. Only when `allowAutoHeight` and`useAverageAutoHeightEstimation` are false.
useAverageAutoHeightEstimation	`bool`	`true`	When allowAutoHeight is true and this prop is true, the estimated height will be computed based on the average height of auto height rows.
scrollToIndex	`number`		The scrollToIndex property passed to react-tiny-virtual-list
scrollOffset	`number`		The scrollOffset property passed to react-tiny-virtual-list
scrollToAlignment	`'start' \| 'center' \| 'end' \| 'auto'`		The scrollToAlignment property passed to react-tiny-virtual-list
isNumber	`bool`	`false`	Adds textAlign: right and fontFamily: mono.
textProps	`object`		Pass additional props to the Text component.
textProps	`objectOf`		Pass additional props to the Text component.