Table
Table (테이블)
Table은 데이터 집합을 표시하는 컴포넌트야. 완전히 커스터마이징할 수 있고, 사용자가 패턴과 인사이트를 찾기 쉽도록 정보를 훑어보기 편한 방식으로 보여줘. 카드 같은 주요 콘텐츠에 임베드할 수 있으며, 시각화, 내비게이션, 데이터를 조회하고 조작하는 도구를 포함할 수 있어.
출처: 문서
본문
소개 (Introduction)
Table은 서로 연관된 여러 컴포넌트의 집합으로 구현돼요:
<TableContainer />:<Table />컴포넌트에 가로 스크롤 동작을 제공하는 래퍼예요.<Table />: 테이블 요소의 주요 컴포넌트로, 기본적으로<table>로 렌더링돼요.<TableHead />:<Table />의 헤더 행들의 컨테이너로, 기본적으로<thead>로 렌더링돼요.<TableBody />:<Table />의 본문 행들의 컨테이너로, 기본적으로<tbody>로 렌더링돼요.<TableRow />: 테이블의 한 행으로,<TableHead />,<TableBody />,<TableFooter />에서 사용할 수 있어요. 기본적으로<tr>로 렌더링돼요.<TableCell />: 테이블의 한 셀로,<TableRow />안에서 사용해요. 기본적으로<TableHead />에서는<th>,<TableBody />에서는<td>로 렌더링돼요.<TableFooter />: 테이블의 푸터 행들의 선택적인 컨테이너로, 기본적으로<tfoot>로 렌더링돼요.<TablePagination />: 테이블 데이터를 페이징하는 컨트롤을 제공하는 컴포넌트예요. 'Sorting & selecting' 예제와 'Custom Table Pagination Action' 예제를 참고하세요.<TableSortLabel />: 열 헤더에 정렬 컨트롤을 표시하는 컴포넌트로, 사용자가 데이터를 오름차순이나 내림차순으로 정렬할 수 있게 해줘요. 'Sorting & selecting' 예제를 참고하세요.
기본 테이블 (Basic table)
꾸밈이 없는 간단한 예시예요.
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number,
) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];
export default function BasicTable() {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow
key={row.name}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
데이터 테이블 (Data table)
Table 컴포넌트는 네이티브 <table> 요소와 밀접하게 매핑돼요. 이 제약 때문에 풍부한 데이터 테이블을 만들기 어려울 수 있어요.
대량의 표 형식 데이터를 다루는 데 집중한 유스 케이스에는 DataGrid 컴포넌트가 설계되어 있어요. 더 엄격한 구조를 가지는 대신, 더 강력한 기능들을 얻을 수 있어요.
import {
DataGrid,
GridCell,
type GridCellProps,
type GridColDef,
} from '@mui/x-data-grid';
import Paper from '@mui/material/Paper';
const columns: GridColDef[] = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'firstName', headerName: 'First name', width: 130 },
{ field: 'lastName', headerName: 'Last name', width: 130 },
{
field: 'age',
headerName: 'Age',
type: 'number',
width: 90,
},
{
field: 'fullName',
headerName: 'Full name',
description: 'This column has a value getter and is not sortable.',
sortable: false,
width: 160,
valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
},
];
const rows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];
const paginationModel = { page: 0, pageSize: 5 };
function renderRowHeaderCell(props: GridCellProps) {
return (
<GridCell
{...props}
role={props.column.field === 'fullName' ? 'rowheader' : 'gridcell'}
/>
);
}
export default function DataTable() {
return (
<Paper sx={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
initialState={{ pagination: { paginationModel } }}
pageSizeOptions={[5, 10]}
checkboxSelection
slots={{ cell: renderRowHeaderCell }}
sx={{ border: 0 }}
/>
</Paper>
);
}
밀집 테이블 (Dense table)
꾸밈이 없는 밀집(dense) 테이블의 간단한 예시예요. 기본 테이블과 동일한 구조에서 Table에 size="small" prop만 추가하면 돼요.
정렬 & 선택 (Sorting & selecting)
이 예시는 선택을 위한 Checkbox와 클릭 가능한 행, 그리고 커스텀 Toolbar의 사용을 보여줘요. 열 헤딩 스타일링에는 TableSortLabel 컴포넌트를 사용해요.
Table에는 가로 스크롤을 보여주기 위해 고정 너비를 줬어요. 페이징 컨트롤이 스크롤되지 않도록 TablePagination 컴포넌트를 Table 바깥에 두었어요. (아래 'Custom Table Pagination Action' 예제는 TableFooter 안에 페이지네이션을 보여줘요.)
import * as React from 'react';
import { alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import DeleteIcon from '@mui/icons-material/Delete';
import FilterListIcon from '@mui/icons-material/FilterList';
import { visuallyHidden } from '@mui/utils';
interface Data {
id: number;
calories: number;
carbs: number;
fat: number;
name: string;
protein: number;
}
function createData(
id: number,
name: string,
calories: number,
fat: number,
carbs: number,
protein: number,
): Data {
return {
id,
name,
calories,
fat,
carbs,
protein,
};
}
const rows = [
createData(1, 'Cupcake', 305, 3.7, 67, 4.3),
createData(2, 'Donut', 452, 25.0, 51, 4.9),
createData(3, 'Eclair', 262, 16.0, 24, 6.0),
createData(4, 'Frozen yoghurt', 159, 6.0, 24, 4.0),
createData(5, 'Gingerbread', 356, 16.0, 49, 3.9),
createData(6, 'Honeycomb', 408, 3.2, 87, 6.5),
createData(7, 'Ice cream sandwich', 237, 9.0, 37, 4.3),
createData(8, 'Jelly Bean', 375, 0.0, 94, 0.0),
createData(9, 'KitKat', 518, 26.0, 65, 7.0),
createData(10, 'Lollipop', 392, 0.2, 98, 0.0),
createData(11, 'Marshmallow', 318, 0, 81, 2.0),
createData(12, 'Nougat', 360, 19.0, 9, 37.0),
createData(13, 'Oreo', 437, 18.0, 63, 4.0),
];
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
type Order = 'asc' | 'desc';
function getComparator<Key extends keyof any>(
order: Order,
orderBy: Key,
): (
a: { [key in Key]: number | string },
b: { [key in Key]: number | string },
) => number {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
interface HeadCell {
disablePadding: boolean;
id: keyof Data;
label: string;
numeric: boolean;
}
const headCells: readonly HeadCell[] = [
{
id: 'name',
numeric: false,
disablePadding: true,
label: 'Dessert (100g serving)',
},
{
id: 'calories',
numeric: true,
disablePadding: false,
label: 'Calories',
},
{
id: 'fat',
numeric: true,
disablePadding: false,
label: 'Fat (g)',
},
{
id: 'carbs',
numeric: true,
disablePadding: false,
label: 'Carbs (g)',
},
{
id: 'protein',
numeric: true,
disablePadding: false,
label: 'Protein (g)',
},
];
interface EnhancedTableProps {
numSelected: number;
onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
order: Order;
orderBy: string;
rowCount: number;
}
function EnhancedTableHead(props: EnhancedTableProps) {
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
props;
const createSortHandler =
(property: keyof Data) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
color="primary"
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
onChange={onSelectAllClick}
slotProps={{
input: { 'aria-label': 'select all desserts' },
}}
/>
</TableCell>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.numeric ? 'right' : 'left'}
padding={headCell.disablePadding ? 'none' : 'normal'}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
interface EnhancedTableToolbarProps {
numSelected: number;
}
function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
const { numSelected } = props;
return (
<Toolbar
sx={[
{
pl: { sm: 2 },
pr: { xs: 1, sm: 1 },
},
numSelected > 0 && {
bgcolor: (theme) =>
alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
},
]}
>
{numSelected > 0 ? (
<Typography
variant="subtitle1"
component="div"
sx={{
color: 'inherit',
flex: '1 1 100%',
}}
>
{numSelected} selected
</Typography>
) : (
<Typography
sx={{ flex: '1 1 100%' }}
variant="h6"
id="tableTitle"
component="div"
>
Nutrition
</Typography>
)}
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton>
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</Toolbar>
);
}
export default function EnhancedTable() {
const [order, setOrder] = React.useState<Order>('asc');
const [orderBy, setOrderBy] = React.useState<keyof Data>('calories');
const [selected, setSelected] = React.useState<readonly number[]>([]);
const [page, setPage] = React.useState(0);
const [dense, setDense] = React.useState(false);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const handleRequestSort = (
event: React.MouseEvent<unknown>,
property: keyof Data,
) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.checked) {
const newSelected = rows.map((n) => n.id);
setSelected(newSelected);
return;
}
setSelected([]);
};
const handleClick = (event: React.MouseEvent<unknown>, id: number) => {
const selectedIndex = selected.indexOf(id);
let newSelected: readonly number[] = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, id);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1),
);
}
setSelected(newSelected);
};
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const handleChangeDense = (event: React.ChangeEvent<HTMLInputElement>) => {
setDense(event.target.checked);
};
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
const visibleRows = React.useMemo(
() =>
[...rows]
.sort(getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
[order, orderBy, page, rowsPerPage],
);
return (
<Box sx={{ width: '100%' }}>
<Paper sx={{ width: '100%', mb: 2 }}>
<EnhancedTableToolbar numSelected={selected.length} />
<TableContainer>
<Table
sx={{ minWidth: 750 }}
aria-labelledby="tableTitle"
size={dense ? 'small' : 'medium'}
>
<EnhancedTableHead
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
/>
<TableBody>
{visibleRows.map((row, index) => {
const isItemSelected = selected.includes(row.id);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.id)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.id}
selected={isItemSelected}
sx={{ cursor: 'pointer' }}
>
<TableCell padding="checkbox">
<Checkbox
color="primary"
checked={isItemSelected}
slotProps={{
input: { 'aria-labelledby': labelId },
}}
/>
</TableCell>
<TableCell
component="th"
id={labelId}
scope="row"
padding="none"
>
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow
style={{
height: (dense ? 33 : 53) * emptyRows,
}}
>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
<FormControlLabel
control={<Switch checked={dense} onChange={handleChangeDense} />}
label="Dense padding"
/>
</Box>
);
}
커스터마이징 (Customization)
여기 컴포넌트를 커스터마이징하는 예시가 있어요. 자세한 내용은 overrides 문서 페이지에서 확인할 수 있어요.
import { styled } from '@mui/material/styles';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14,
},
}));
const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
// hide last border
'&:last-child td, &:last-child th': {
border: 0,
},
}));
function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number,
) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];
export default function CustomizedTables() {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
<StyledTableCell align="right">Calories</StyledTableCell>
<StyledTableCell align="right">Fat (g)</StyledTableCell>
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
<StyledTableCell align="right">Protein (g)</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<StyledTableRow key={row.name}>
<StyledTableCell component="th" scope="row">
{row.name}
</StyledTableCell>
<StyledTableCell align="right">{row.calories}</StyledTableCell>
<StyledTableCell align="right">{row.fat}</StyledTableCell>
<StyledTableCell align="right">{row.carbs}</StyledTableCell>
<StyledTableCell align="right">{row.protein}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
커스텀 페이지네이션 옵션 (Custom pagination options)
"Rows per page" 셀렉트에 표시되는 옵션들은 rowsPerPageOptions prop으로 커스터마이징할 수 있어요. 다음 중 하나를 제공하면 돼요:
-
numbers: 각 숫자가 옵션의 라벨과 값으로 사용돼요.
<TablePagination rowsPerPageOptions={[10, 50]} /> -
objects:
value와label키가 각각 옵션의 값과 라벨로 사용돼요(예: 'All' 같은 언어 문자열에 유용).<TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />
커스텀 페이지네이션 액션 (Custom pagination actions)
TablePagination 컴포넌트의 ActionsComponent prop으로 커스텀 액션을 구현할 수 있어요.
예시의 핵심 구조는 아래와 같아요. TablePaginationActions라는 별도 컴포넌트를 만들어 첫 페이지/이전/다음/마지막 페이지 버튼을 IconButton과 useTheme()의 theme.direction으로 RTL을 고려해 구현하고, Table 바깥 또는 TableFooter 안의 TablePagination에 ActionsComponent={TablePaginationActions}로 전달해요.
import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableFooter from '@mui/material/TableFooter';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import FirstPageIcon from '@mui/icons-material/FirstPage';
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import LastPageIcon from '@mui/icons-material/LastPage';
interface TablePaginationActionsProps {
count: number;
page: number;
rowsPerPage: number;
onPageChange: (
event: React.MouseEvent<HTMLButtonElement>,
newPage: number,
) => void;
}
function TablePaginationActions(props: TablePaginationActionsProps) {
const theme = useTheme();
const { count, page, rowsPerPage, onPageChange } = props;
const handleFirstPageButtonClick = (
event: React.MouseEvent<HTMLButtonElement>,
) => {
onPageChange(event, 0);
};
const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
onPageChange(event, page - 1);
};
const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
onPageChange(event, page + 1);
};
const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</Box>
);
}
이 TablePaginationActions를 Table 바깥이 아닌 TableFooter 안의 TablePagination에 ActionsComponent={TablePaginationActions}로 전달하면 됩니다.
고정 헤더 (Sticky header)
스크롤 가능한 행과 고정된 열 헤더를 가진 테이블 예시예요. stickyHeader prop을 활용해요.
import * as React from 'react';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
interface Column {
id: 'name' | 'code' | 'population' | 'size' | 'density';
label: string;
minWidth?: number;
align?: 'right';
format?: (value: number) => string;
}
const columns: readonly Column[] = [
{ id: 'name', label: 'Name', minWidth: 170 },
{ id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
{
id: 'population',
label: 'Population',
minWidth: 170,
align: 'right',
format: (value: number) => value.toLocaleString('en-US'),
},
{
id: 'size',
label: 'Size\u00a0(km\u00b2)',
minWidth: 170,
align: 'right',
format: (value: number) => value.toLocaleString('en-US'),
},
{
id: 'density',
label: 'Density',
minWidth: 170,
align: 'right',
format: (value: number) => value.toFixed(2),
},
];
interface Data {
name: string;
code: string;
population: number;
size: number;
density: number;
}
function createData(
name: string,
code: string,
population: number,
size: number,
): Data {
const density = population / size;
return { name, code, population, size, density };
}
const rows = [
createData('India', 'IN', 1324171354, 3287263),
createData('China', 'CN', 1403500365, 9596961),
createData('Italy', 'IT', 60483973, 301340),
createData('United States', 'US', 327167434, 9833520),
createData('Canada', 'CA', 37602103, 9984670),
createData('Australia', 'AU', 25475400, 7692024),
createData('Germany', 'DE', 83019200, 357578),
createData('Ireland', 'IE', 4857000, 70273),
createData('Mexico', 'MX', 126577691, 1972550),
createData('Japan', 'JP', 126317000, 377973),
createData('France', 'FR', 67022000, 640679),
createData('United Kingdom', 'GB', 67545757, 242495),
createData('Russia', 'RU', 146793744, 17098246),
createData('Nigeria', 'NG', 200962417, 923768),
createData('Brazil', 'BR', 210147125, 8515767),
];
export default function StickyHeadTable() {
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<Paper sx={{ width: '100%', overflow: 'hidden' }}>
<TableContainer sx={{ maxHeight: 440 }}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row) => {
return (
<TableRow hover key={row.code}>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell
key={column.id}
component={column.id === 'name' ? 'th' : 'td'}
scope={column.id === 'name' ? 'row' : undefined}
align={column.align}
>
{column.format && typeof value === 'number'
? column.format(value)
: value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
);
}
핵심은 Table에 stickyHeader prop을 주고 TableContainer의 sx={{ maxHeight: 440 }}로 최대 높이를 제한하면, 세로로 스크롤해도 헤더가 위에 고정돼요.
열 그룹화 (Column grouping)
테이블 헤드 안에 여러 테이블 행을 렌더링해서 열 헤더를 그룹화할 수 있어요:
<TableHead>
<TableRow />
<TableRow />
</TableHead>
TableRow에 <TableCell colSpan={...} align="center">를 조합하면 두 줄로 나눠 그룹 헤더와 개별 열 헤더를 표현할 수 있어요. 위 'Sticky header' 예시처럼 columns 배열을 정의하고 첫 TableRow에서 colSpan으로 그룹을 묶고, 두 번째 TableRow에서 각 열의 라벨을 렌더링하면 돼요. 전체 코드는 원문의 ColumnGroupingTable 예시를 참고하세요.
접히는 테이블 (Collapsible table)
행을 펼쳐 더 많은 정보를 보여주는 확장 가능한 행을 가진 테이블 예시예요. Collapse 컴포넌트를 활용해요.
Row 컴포넌트를 따로 만들어 각 행에 펼치기/접기 IconButton을 두고, Collapse in={open} timeout="auto" unmountOnExit 안에 추가 상세 정보(예: History 하위 테이블)를 넣어요. aria-expanded, aria-controls로 접근성을 챙겨요. 전체 코드는 원문의 CollapsibleTable 예시를 참고하세요.
스패닝 테이블 (Spanning table)
행과 열을 스패닝하는 간단한 예시예요. colSpan, rowSpan을 사용해요.
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
const TAX_RATE = 0.07;
function ccyFormat(num: number) {
return `${num.toFixed(2)}`;
}
function priceRow(qty: number, unit: number) {
return qty * unit;
}
function createRow(desc: string, qty: number, unit: number) {
const price = priceRow(qty, unit);
return { desc, qty, unit, price };
}
interface Row {
desc: string;
qty: number;
unit: number;
price: number;
}
function subtotal(items: readonly Row[]) {
return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0);
}
const rows = [
createRow('Paperclips (Box)', 100, 1.15),
createRow('Paper (Case)', 10, 45.99),
createRow('Waste Basket', 2, 17.99),
];
const invoiceSubtotal = subtotal(rows);
const invoiceTaxes = TAX_RATE * invoiceSubtotal;
const invoiceTotal = invoiceTaxes + invoiceSubtotal;
export default function SpanningTable() {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="spanning table">
<TableHead>
<TableRow>
<TableCell align="center" colSpan={3}>
Details
</TableCell>
<TableCell align="right">Price</TableCell>
</TableRow>
<TableRow>
<TableCell>Desc</TableCell>
<TableCell align="right">Qty.</TableCell>
<TableCell align="right">Unit</TableCell>
<TableCell align="right">Sum</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.desc}>
<TableCell component="th" scope="row">
{row.desc}
</TableCell>
<TableCell align="right">{row.qty}</TableCell>
<TableCell align="right">{row.unit}</TableCell>
<TableCell align="right">{ccyFormat(row.price)}</TableCell>
</TableRow>
))}
<TableRow>
<TableCell rowSpan={3} />
<TableCell component="th" scope="row" colSpan={2}>
Subtotal
</TableCell>
<TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
Tax
</TableCell>
<TableCell align="right">{`${(TAX_RATE * 100).toFixed(0)} %`}</TableCell>
<TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row" colSpan={2}>
Total
</TableCell>
<TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
);
}
가상화 테이블 (Virtualized table)
다음 예시는 react-virtuoso를 Table 컴포넌트와 함께 사용하는 방법을 보여줘요. 200개의 행을 렌더링하고 그 이상도 쉽게 처리할 수 있어요. 가상화는 성능 문제에 도움이 돼요.
import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import { TableVirtuoso, TableComponents } from 'react-virtuoso';
import Chance from 'chance';
interface Data {
id: number;
firstName: string;
lastName: string;
age: number;
phone: string;
state: string;
}
interface ColumnData {
dataKey: keyof Data;
label: string;
numeric?: boolean;
width?: number;
}
const chance = new Chance(42);
TableVirtuoso에 components로 TableContainer, Table, TableHead, TableRow, TableBody를 각각 매핑한 VirtuosoTableComponents를 전달하고, fixedHeaderContent와 itemContent로 헤더와 행 렌더링을 정의하는 구조예요. 전체 코드는 원문의 ReactVirtualizedTable 예시를 참고하세요.
접근성 (Accessibility)
(WAI tutorial: https://www.w3.org/WAI/tutorials/tables/)
행·열 헤더 (Row and column headers)
헤더 셀은 각 행이나 열의 데이터를 식별해줘요. 화면 낭독기들은 사용자가 테이블을 탐색할 때 맥락을 제공하기 위해 이 연결을 사용해요.
TableCell은 TableHead 안에 있을 때 자동으로 <th>로 렌더링되지만, TableBody 안에서는 <td>로 렌더링돼요. 본문 셀이 자기 행을 식별하는 라벨을 담고 있다면 component="th"와 scope="row"로 행 헤더로 렌더링하세요:
<TableRow>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell>{row.calories}</TableCell>
</TableRow>
행 헤더에는 임의의 인덱스보다 사람 이름이나 상품명 같은 의미 있는 값을 선택하세요. 테이블에 이름과 성 컬럼이 모두 있는 경우처럼 여러 셀이 행 헤더로 표시될 수 있어요.
Data Grid는 네이티브 테이블 요소 대신 ARIA 역할을 사용해요. 행 헤더 컬럼 식별 방법은 Data Grid row headers 가이드를 참고하세요.
캡션 (Caption)
캡션은 테이블의 제목처럼 작동해요. 대부분의 화면 낭독기가 캡션의 내용을 알려줘요. 캡션은 사용자가 테이블을 찾고 그 테이블이 무엇에 관한 것인지 이해하며 읽을지 결정하는 데 도움이 돼요.
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number,
) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
];
export default function AccessibleTable() {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="caption table">
<caption>A basic table example with a caption</caption>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
Table / TableBody / TableCell / TableContainer / TableFooter / TableHead / TablePagination / TableRow / TableSortLabel API
임포트 (Import):
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableFooter from '@mui/material/TableFooter';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
// or
import { Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel } from '@mui/material';
주요 props 요약:
Table:component(기본 지정 시table),padding('checkbox' | 'none' | 'normal'),size('medium' | 'small'),stickyHeader를 제공해요.ref는 HTMLTableElement로 전달돼요.TableBody:component를 제공해요.ref는 HTMLTableSectionElement로 전달돼요.TableCell:align('center' | 'inherit' | 'justify' | 'left' | 'right'),padding,scope,size,sortDirection,variant('body' | 'footer' | 'head')를 제공해요.ref는 HTMLTableCellElement로 전달돼요.TableContainer:component를 제공해요.ref는 HTMLDivElement로 전달돼요.TableFooter:component를 제공해요.ref는 HTMLTableSectionElement로 전달돼요.TablePagination: 페이징 컨트롤 관련 props(count,rowsPerPage,page,rowsPerPageOptions,onPageChange,onRowsPerPageChange,ActionsComponent,labelDisplayedRows,labelRowsPerPage)를 제공해요.
테마에서 MuiTable 등을 사용하면 컴포넌트의 기본 props를 바꿀 수 있어요.