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

How to add fade effect in react-table?

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

中添加淡入淡出效果

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

您可以使用 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

您可以根据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;
}