React Bootstrap 表格

表格对于以有组织的布局显示大量数据非常有用。 Bootstrap 支持不同的预定义表格布局。 我们可以在 React 应用程序中使用它们。

React bootstrap 中的表格用法与普通 Bootstrap 相同；唯一的区别是我们使用 className 来指定表格样式，而在 React Bootstrap 中，我们使用 props 来指定表格布局。

让我们了解如何使用 React Bootstrap 表格

如何使用 React Table 组件？

要使用 React Bootstrap 创建表格，我们必须指定 <Table> 组件以及特定的 props 和变体。 Table 组件的导入方式如下

import Table from 'react-bootstrap/Table'

让我们通过一个例子来理解它

App.js

输出

小表格

要创建小尺寸表格，请在 Table 组件中将 size prop 值设置为 sm。 它将创建一个具有较低单元格间距和内边距的小尺寸表格。

考虑下面的示例

App.js

输出

深色表格

我们可以使用深色变体来创建深色表格。 表格单元格的背景颜色将为深色。

要指定深色变体，请在 table 组件中传递 variant='dark' 值。

考虑下面的示例

输出

响应式表格

响应式表格的设计方式允许在视口尺寸小于表格内容宽度时进行水平滚动。

responsive prop 用于在所有视口和断点上创建响应式表格。 响应式表格会自动包装在一个 div 容器中，该容器具有预定义的 CSS 来处理内容溢出。

让我们通过以下示例来理解它

我们正在增加列数以填充表格数据。

App.js

输出

响应式表格会在所有视口上自动调整。

从上面的示例中可以看出，当表格数据达到视口宽度的最大值时，它将显示一个滚动条来滚动表格数据。

断点特定表格

我们还可以指定希望表格响应的断点； 我们可以使用 responsive prop 值作为 sm、md 和 lg。 从指定的断点开始，对于较大的屏幕，表格的行为将按照原始格式正常显示。

以下表格仅在中间设备上响应

同样，我们可以为响应式表格指定 sm 和 lg 选项。 如果我们不指定任何特定的视口，它将始终在所有视口上响应。