如何在react-table中添加淡入淡出效果？

Question

加载、筛选、排序数据时，我们如何在 react-table?

中添加淡入淡出效果

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

Answer 1

您可以使用 react-table 中提供的布尔 loading 道具，还可以提供自定义 LoadingComponent 道具而不是 CSS淡入and/or淡出效果：

基本使用示例

<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

Answer 2

您可以根据loading, filtering状态有条件地添加一个className值，以设置table.

的样式

类似的东西:

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

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

如何在react-table中添加淡入淡出效果？

How to add fade effect in react-table?

css

reactjs

npm

react-table

基本使用示例