Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

table

v4.15.0arrow_drop_down
v4.15.0
STATUS
Passing
DOWNLOADS
104
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
N/A
Table head and contents
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.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

Table head and contents

Table body and contents

Composes the Pane component as the base.

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.

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
NameTypeDefault valueDescription
isSelectable
booltrue
disabled
bool

When true, the cell can’t be edited.

placeholder
node

Optional placeholder when children is falsy.

size
300 | 400300

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
boolfalse

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
number80

Min width of the textarea. The textarea can never be smaller than the cell.

minHeight
number40

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
booltrue

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
booltrue
disabled
bool

When true, the cell can’t be edited.

placeholder
node

Optional placeholder when children is falsy.

size
300 | 400300

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
number32

The height of the table head.

accountForScrollbar
booltrue

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
number48

Default height of each row. 48 is the default height of a TableRow.

allowAutoHeight
boolfalse

When true, support height="auto" on children being rendered. This is somewhat of an expirmental feature.

overscanCount
number5

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 anduseAverageAutoHeightEstimation are false.

useAverageAutoHeightEstimation
booltrue

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
boolfalse

Adds textAlign: right and fontFamily: mono.

textProps
object

Pass additional props to the Text component.

textProps
objectOf

Pass additional props to the Text component.