CODEWITHSUNDEEP
cssreactjsnpmreact-table
Swapnil
Swapnil

Reputation: 37

How to add fade effect in react-table?

While loading, filtering, sorting data, how can we add fade effect in react-table?

react-table source: https://www.npmjs.com/package/react-table

Upvotes: 2

Views: 1052

Answers (2)

Jordan Enev
Jordan Enev

Reputation: 18674

You can conditionally add a className value, according to loading, filtering state, in order to style the table.

Something like that:

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

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

Upvotes: 2

Pablo Huet Carrasco
Pablo Huet Carrasco

Reputation: 397

You can use the boolean loading prop provided in react-table and also provide a custom LoadingComponent prop instead with a CSS fade-in and/or fade-out effect:

Basic use example

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

Also you can replace any of these components as props if you need a finer approach:

  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

Upvotes: 0

Related Questions