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

table-cell

v4.5.2arrow_drop_down
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
1,098
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
2 months ago
SIZE
21 KB
`<TableCell>` will be rendered as an `<th>`or `<td>` depending on the context it is used in.
2 contributors
Use table-cell in your project ?
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.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
chevron_left
chevron_right

<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.

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

Properties
NameTypeDescription
align
'inherit' | 'left' | 'center' | 'right' | 'justify'

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
(required)
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
'default' | 'checkbox' | 'none'

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

scope
string

Set scope attribute.

size
'small' | 'medium'

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
'head' | 'body' | 'footer'

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