TableContainer

Overview

TableContainer is used to place the Table component inside it. The components created by this component are displayed in a TableContainer with a Table layout.

Depending on whether the orientation is horizontal or vertical, the label is shown either above or on the left of it. The TableContainer can be built to have any number of columns.

Please refer to this for more information: https://mui.com/material-ui/api/table-container/.

Import

CODE

import { TableContainer } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Padding	Size Unit: Px	The component Padding with many selectable Size Units.
Size	Size Unit: Px	The component Size of Width and Height with many selectable Size Units.
Layout	Position: None	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
General	Visibility: None Opacity: 100%	The component General includes Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<TableContainer
          sx={{':active': {'padding': '10px 20px 20px 10px',
              'width': '150px','height': '200px',
              'position': 'absolute','top': '15px','right': '15px','bottom': '22px', 'left': '25px',
              'visibility': 'hidden','opacity': 0.58,
              'backgroundColor': '#ff0000ff',},}}>
</TableContainer>

Related Component

Table