/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/pages/performance/table-component.js
57 строк
2 KB
Albert Yu
[docs] Cleanup `@mui/base` (#48278)
14 апр 2026, 21:11
Не верифицирован
14 апр 2026, 21:11
8d712d4
Код
Авторство
О чём код?
import * as React from 'react'; import PropTypes from 'prop-types'; import NoSsr from '@mui/material/NoSsr'; const createComponent = (defaultComponent) => { const MyComponent = React.forwardRef(function MyComponent(props, ref) { const { component: Component = defaultComponent, ...other } = props; return <Component ref={ref} {...other} />; }); MyComponent.propTypes = { component: PropTypes.elementType, }; return MyComponent; }; const Table = createComponent('table'); const TableHead = createComponent('thead'); const TableRow = createComponent('tr'); const TableCell = createComponent('td'); const TableBody = createComponent('tbody'); const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 }; const rows = Array.from(new Array(100)).map(() => data); export default function TableComponent() { return ( <NoSsr defer> <Table> <TableHead> <TableRow> <TableCell>Dessert (100g serving)</TableCell> <TableCell>Calories</TableCell> <TableCell>Fat (g)</TableCell> <TableCell>Carbs (g)</TableCell> <TableCell>Protein (g)</TableCell> </TableRow> </TableHead> <TableBody> {rows.map((row, index) => ( <TableRow key={index}> <TableCell component="th" scope="row"> {row.name} </TableCell> <TableCell>{row.calories}</TableCell> <TableCell>{row.fat}</TableCell> <TableCell>{row.carbs}</TableCell> <TableCell>{row.protein}</TableCell> </TableRow> ))} </TableBody> </Table> </NoSsr> ); }