【Material-UI】Table 组件详解

最新推荐文章于 2025-04-01 16:26:12 发布

Peter-Lu

最新推荐文章于 2025-04-01 16:26:12 发布

阅读量1.5k

点赞数 25

分类专栏： # material-ui 文章标签： ui Material-UI 前端 javascript

本文链接：https://blog.csdn.net/lph159/article/details/141814535

版权

material-ui 专栏收录该内容

228 篇文章

订阅专栏

文章目录

Material-UI 是 React 生态系统中备受欢迎的 UI 框架，提供了丰富的组件来帮助开发者创建现代、响应式的用户界面。本文将深入介绍 Material-UI 中的 Table 组件，包括基本使用、数据表格和紧凑表格的应用场景与代码示例。通过本文，你将能够全面理解如何在项目中使用 Table 组件来展示和管理数据。

一、Table 组件概述

在 Web 开发中，表格是用于展示结构化数据的常见方式。Material-UI 提供的 Table 组件不仅能够满足基本的数据展示需求，还能通过各种功能和属性满足复杂的数据处理场景。Table 组件能够与原生 HTML 的 <table> 元素紧密对应，并通过 Material-UI 的样式和功能扩展提供更丰富的用户体验。

1.1 Table 组件的核心元素

Material-UI 的 Table 组件由多个子组件组成，每个子组件都对应 <table> 元素的一部分：

Table: 表格的主容器，对应 <table> 元素。
TableHead: 表头容器，对应 <thead> 元素。
TableBody: 表格主体，对应 <tbody> 元素。
TableRow: 表格行，对应 <tr> 元素。
TableCell: 表格单元格，对应 <td> 或 <th> 元素。
TableContainer: 用于包裹整个表格，通常用于提供外层样式和布局。

通过组合这些子组件，你可以构建出各种样式和功能的表格，从简单的基本表格到复杂的数据展示。

二、基本表格示例

我们首先来看一个简单的表格示例，它展示了几种甜品的营养信息。这是一个最基础的表格，没有任何多余的装饰和复杂功能，适合用来展示简单的静态数据。

2.1 示例代码

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';

function createData(name, calories, fat, carbs, protein) {
  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&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(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>
  );
}

2.2 代码解析

在这个示例中，我们使用了 Material-UI 的 Table、TableBody、TableCell、TableContainer、TableHead 和 TableRow 组件来构建一个简单的表格。这个表格展示了五种甜品的营养信息，如卡路里、脂肪、碳水化合物和蛋白质含量。

TableContainer 组件包裹了整个表格，并使用 Paper 组件来提供一个纸张风格的背景。
Table 组件使用 sx 属性设置了最小宽度，以确保表格在较宽的容器中不会过于紧凑。
TableHead 和 TableBody 分别定义了表头和表体部分。
TableRow 组件表示表格中的一行，而 TableCell 组件则表示单元格。在表头部分，TableCell 默认会被渲染为表头单元格（<th>），而在表体部分，它们会被渲染为普通单元格（<td>）。

三、数据表格与 DataGrid 组件

尽管 Table 组件在展示简单的静态数据时非常有用，但在处理大规模数据集或需要高级功能（如分页、排序、过滤）时，DataGrid 组件更为合适。DataGrid 是一个专为处理大量表格数据而设计的高级组件，它提供了更强大的功能和更高的性能。

3.1 DataGrid 组件的核心功能

分页: 通过分页功能，你可以将数据集按页分割，减少页面加载时间并提升用户体验。
排序: DataGrid 允许用户点击列头进行数据排序，支持升序和降序。
过滤: 用户可以根据某些条件筛选数据，这对于处理大量数据时非常实用。
选择: 支持单选或多选功能，用户可以选择一行或多行数据进行操作。

3.2 示例代码

以下是一个使用 DataGrid 组件展示用户信息的简单示例：

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import Paper from '@mui/material/Paper';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First name', width: 150 },
  { field: 'lastName', headerName: 'Last name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
  { field: 'fullName', headerName: 'Full name', width: 160 },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35, fullName: 'Jon Snow' },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42, fullName: 'Cersei Lannister' },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45, fullName: 'Jaime Lannister' },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16, fullName: 'Arya Stark' },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', fullName: 'Daenerys Targaryen' },
];

export default function DataGridDemo() {
  return (
    <Paper sx={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSizeOptions={[5, 10]}
        checkboxSelection
        sx={{ border: 0 }}
      />
    </Paper>
  );
}

3.3 代码解析

这个示例展示了一个包含五名用户信息的表格：

DataGrid 组件通过 rows 和 columns 属性分别接收数据和列定义。
columns 数组定义了每一列的属性，例如 field（列的标识符）、headerName（列头名称）以及 width（列宽度）。
rows 数组包含了表格的数据，每个对象对应一行数据。
DataGrid 组件通过 pageSizeOptions 定义了分页选项，允许用户选择每页展示的行数。

四、紧凑表格示例

在某些情况下，你可能需要在有限的空间内展示更多的数据。此时，可以使用紧凑表格来减少单元格的内边距，从而让表格看起来更紧凑。

4.1 示例代码

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';

function createData(name, calories, fat, carbs, protein) {
  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 DenseTable() {
  return (
    <TableContainer component={Paper}>
      <Table size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(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>
  );
}

4.2 代码解析

紧凑表格的关键在于 Table 组件的 size 属性。将 size 设置为 "small"，表格会自动应用更紧凑的样式，减少行高和内边距。这样，能够在有限的空间内展示更多数据，非常适合在移动设备或需要显示大量信息的情况下使用。

五、总结

Material-UI 的 Table 组件是一个功能强大且易于使用的工具，适合用于展示和管理各种结构化数据。无论是基本表格、复杂数据表格，还是紧凑表格，Table 组件都能够提供灵活的解决方案。通过本文的学习，你应该能够熟练使用 Table 组件来构建符合需求的数据表格。在实际项目中，你可以根据业务需求选择合适的表格形式，充分利用 Material-UI 提供的丰富功能。