table-cell

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

8,869

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

25 KB

`<TableCell>` will be rendered as an `<th>`or `<td>` depending on the context it is used in.

React

Table

UI Components

2 contributors

Install table-cell as a package?

Copied

npm i @bit/mui-org.material-ui.table-cell

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

<TableCell> will be rendered as an <th>or <td> depending on the context it is used in. Where context literally is the React context.

Since it is not decided via prop, we have create loose typings here.

Set the text-align on the table cell content.

Monetary or generally number fields should be right aligned as that allows you to add them up quickly in your head without having to worry about decimals.

The table cell contents.

The component used for the root node. Either a string to use a DOM element or a component.

Sets the padding applied to the cell. By default, the Table parent component set the value (default).

Set scope attribute.

Specify the size of the cell. By default, the Table parent component set the value (medium).

Set aria-sort direction.

Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value.

The component renders a <th> element when the parent context is a header or otherwise a <td> element. Demos:

Tables

API:

TableCell API

The component renders a <th> element when the parent context is a header or otherwise a <td> element.

Properties

Name	Type	Description
align	`'center' \| 'inherit' \| 'justify' \| 'left' \| 'right'`	Set the text-align on the table cell content. Monetary or generally number fields should be right aligned as that allows you to add them up quickly in your head without having to worry about decimals.
children	`node`	The table cell contents.
classes	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
component	`elementType`	The component used for the root node. Either a string to use a DOM element or a component.
padding	`'checkbox' \| 'default' \| 'none'`	Sets the padding applied to the cell. By default, the Table parent component set the value (`default`).
scope	`string`	Set scope attribute.
size	`'medium' \| 'small'`	Specify the size of the cell. By default, the Table parent component set the value (`medium`).
sortDirection	`'asc' \| 'desc' \| false`	Set aria-sort direction.
variant	`'body' \| 'footer' \| 'head'`	Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value.