Question

在加载，过滤，排序数据时，如何在反应表中添加淡入淡出效果？

反应表来源：https://www.npmjs.com/package/react-table

Answer 1

您可以根据className状态有条件地添加loading, filtering值，以便为表格设置样式。

类似的东西：

// Conditionally add `--is-filtering` css className
<ReactTable className={isFiltering ? '--is-filtering' : ''} data={data} />

// Basic Fade css styling
.--is-filtering {
  opacity: 0.5;
}

Answer 2

您可以使用反应表中提供的布尔loading道具，还可以提供自定义LoadingComponent道具，而不是CSS淡入和/或淡出效果：

基本使用示例

<ReactTable
  data={this.state.data}
  columns={this.state.columns}
  loading={this.state.loading}
  LoadingComponent={YourFadeComponent}
/>

如果您需要更好的方法，也可以将以下任何组件替换为道具：

  TheadComponent: component,
  TbodyComponent: component,
  TrGroupComponent: component,
  TrComponent: component,
  ThComponent: component,
  TdComponent: component,
  TfootComponent: component,
  ExpanderComponent: component,
  AggregatedComponent: component,
  PivotValueComponent: component,
  PivotComponent: component,
  FilterComponent: component,
  PaginationComponent: component,
  PreviousComponent: undefined,
  NextComponent: undefined,
  LoadingComponent: component,
  NoDataComponent: component,
  ResizerComponent: component

如何在反应表中添加淡入淡出效果？

2 个答案:

基本使用示例