Как добавить эффект затухания в реактивной таблице? - PullRequest
Новая
       8

Как добавить эффект затухания в реактивной таблице?

1 голос
/ 20 марта 2019

При загрузке, фильтрации, сортировке данных, Как мы можем добавить эффект затухания в таблице реакций?

Источник реактивной таблицы: https://www.npmjs.com/package/react-table

Ответы [ 2 ]

2 голосов
/ 21 марта 2019

Вы можете условно добавить значение 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;
}
0 голосов
/ 21 марта 2019

Вы можете использовать логическую 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
...