React-table: Custom Component With Loading

[lawlessnut]

Trying custom loading component. Seems like not appear at all.

`
import React from "react";
import RefreshIndicator from "material-ui/RefreshIndicator";
import PropTypes from "prop-types";
import ReactTable from "react-table";
import {AutoSizer } from "react-virtualized";

class LoadingCmp extends React.Component{

render(){
    return (
        <RefreshIndicator loading={true} size={50} loadingColor="#FF9800" status="loading" />
    )

}

}

class Table extends React.Component {
constructor(props) {
super(props);
}

static get propTypes () {
    return {
        data  : PropTypes.array,
        columns : PropTypes.array.isRequired,
        loading : PropTypes.bool,
        showPagination : PropTypes.bool,
        showPageSizeOptions : PropTypes.bool,
        defaultPageSize : PropTypes.number,
        filterable : PropTypes.bool,
        pivotBy : PropTypes.array
    }
}

static get defaultProps () {
    return {
        data  : [],
        columns : [],
        loading : true,
        minRows:20,
        showPageSizeOptions : true,
        showPagination : true,
        filterable : false
    }
}

render() {
    const {data} = this.props;
    const minRows = data.length >20 ? data.length : 20;
    return (
        <AutoSizer>
            { ({height, width}) =>{
                return (
                    <ReactTable
                        {...this.props}
                        LoadingComponent={LoadingCmp}
                        minRows={minRows}
                        style={{height,width}} />
                )
            }}
        </AutoSizer>
    )
}

}
export default Table;`

[brammitch]

Here's the custom loader I created for use with my React/Redux setup. I think you need the CSS class names in there to override the default CSS.

I'm still new to this, so not 100% sure if I'm doing it correctly, but I got it to work so hopefully it will help you.

export default class CustomTableLoader extends Component {
    render() {
        return (
            <div className='-loading-active'>
                // Show spinner when isFetching is True
                {this.props.isFetching ?
                    <div className='-loading-inner'>
                        // CircularProgress spinner from material-ui
                        <CircularProgress />
                    </div>
                    :
                    <div />
                }
            </div>
        );
    }
}

[lawlessnut]

@brammitch Thanks for the input. Just want to know did you try putting CustomTableLoader class as LoadingComponent={CustomTableLoader} in ReactTable. Did it work ?
Let me know

[brammitch]

@lawlessnut Yes that is how I implemented it. My React Table is a fully controlled component, and the loading part looks like:

<ReactTable
    manual
    loading={this.props.isFetching}
    LoadingComponent={CustomTableLoader}
    ...
/>

[lawlessnut]

@brammitch Thanks. let me give shot!!

[lawlessnut]

@brammitch This did work
`class LoadingCmp extends React.Component{

render(){

    {return this.props.loading ?
         <div  className='-loading -active'>
            <div className="-loading-inner">
                <RefreshIndicator loading={true}
                                  size={50}
                                  style={{left:"50%", top : "50%"}}
                                  loadingColor="#FF9800" status="loading" />
            </div>
        </div> :  null;
    }

}

}`

[brammitch]

@lawlessnut Glad it worked for you!

[valentinaAl]

There's no news about this issue? I'm struggling with the exact same issue.

[lawlessnut]

@valentinaAl If you follow above example it should work.

[hcorta]

Working example with MaterialUI Loading Component:

// Table Component

// Dependencies
import React, { Component } from 'react'
import PropTypes from 'prop-types'

// External Components
import ReactTable from 'react-table'
import { columns } from './TableConfig'
import Loading from './components/Loading'

const Table = props => {
  const { data } = props

  return (
    <ReactTable
      data={data}
      columns={columns}
      minRows={3}
      showPagination={true}
      defaultSorted={[{
        id: 'openedAt',
        desc: true
      }]}
      pageSize={4}
      style={{ height: '100%' }}
      loading={data.length === 0}
      LoadingComponent={Loading}
    />
  )
}

Table.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object)
}

export default Table

// Loading Component

import React, { Component } from 'react'
import CircularProgress from '@material-ui/core/CircularProgress'

export default class Loading extends Component {
  render () {
    return (
      this.props.loading
        ? <div className='-loading -active'>
            <div className='-loading-inner'>
              <CircularProgress />
            </div>
          </div>
        : null
    )
  }
}

[ersel]

for future reference, if anyone ends up on this issue @hcorta 's solution works.

but you need to make sure your Loading components outermost div has the correct classes.

-loading -active

Otherwise loading icon displayed underneath the table, rather than inside it!

[samirlama]

i did not understand about how that this.props.loading is working there... i didn't see props being passed