最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Custom Loader does not get applied with respect to react-table - Stack Overflow

programmeradmin2浏览0评论

I am trying to over ride the default loader provided by react-table with the Spinner provided by the semantic-ui-react . But this does not seem like working. I have maintained three ponents; one is the App, one for Data Grid and the other for the Spinner. Can someone help me here?

Sandbox:

App Component

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
      loading: true
    };
  }

  ponentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    let data = [
      { firstName: "Jack", status: "Submitted" },
      { firstName: "Simon", status: "Pending" },
      { firstName: "Pete", status: "Approved" }
    ];
    setTimeout(() => {
      this.setState({ data, loading: false });
    }, 2000);
  };

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      }
    ];
    this.setState({ columns });
  };

  render() {
    return (
      <>
        <DataGrid
          loading={this.state.loading}
          data={this.state.data}
          columns={this.state.columns}
        />
      </>
    );
  }
}


DataGrid

import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import Spinner from "./Spinner";


export default class DataGrid extends React.Component {
  render() {
    return (
      <>
        <ReactTable
          loading={this.props.loading}
          data={this.props.data}
          LoadingComponent={Spinner}
          columns={this.props.columns}
        />
      </>
    );
  }
}


Spinner

import { Loader } from "semantic-ui-react";
import * as React from "react";

const Spinner: React.FunctionComponent = props => {
  return (
    <div>
      <Loader active={props.spinnerFlag}>Loading</Loader>
    </div>
  );
};

export default Spinner;

I am trying to over ride the default loader provided by react-table with the Spinner provided by the semantic-ui-react . But this does not seem like working. I have maintained three ponents; one is the App, one for Data Grid and the other for the Spinner. Can someone help me here?

Sandbox: https://codesandbox.io/s/react-table-row-table-g3kd5

App Component

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
      loading: true
    };
  }

  ponentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    let data = [
      { firstName: "Jack", status: "Submitted" },
      { firstName: "Simon", status: "Pending" },
      { firstName: "Pete", status: "Approved" }
    ];
    setTimeout(() => {
      this.setState({ data, loading: false });
    }, 2000);
  };

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      }
    ];
    this.setState({ columns });
  };

  render() {
    return (
      <>
        <DataGrid
          loading={this.state.loading}
          data={this.state.data}
          columns={this.state.columns}
        />
      </>
    );
  }
}


DataGrid

import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import Spinner from "./Spinner";


export default class DataGrid extends React.Component {
  render() {
    return (
      <>
        <ReactTable
          loading={this.props.loading}
          data={this.props.data}
          LoadingComponent={Spinner}
          columns={this.props.columns}
        />
      </>
    );
  }
}


Spinner

import { Loader } from "semantic-ui-react";
import * as React from "react";

const Spinner: React.FunctionComponent = props => {
  return (
    <div>
      <Loader active={props.spinnerFlag}>Loading</Loader>
    </div>
  );
};

export default Spinner;
Share Improve this question edited Sep 19, 2020 at 18:04 joy08 asked Oct 1, 2019 at 9:35 joy08joy08 9,6629 gold badges42 silver badges81 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

Okay you are missing something.

First thing is if you check your sandbox it does show loading at the end but there is an issue. You need to do two things

1- Give your Spinner proper style so it will appear on your Table not below it.

2- You need to utilize loading prop that you are passing to ReactTable Component. Because for now your Spinner is always visible its not controlled by loading prop

Your spinner Component should use props.loading instead of props.spinnerFlag because that's what being passed to ReactTable ponent

Change your Spinner file as this

const Spinner: React.FunctionComponent<IProps> = props => {
return props.loading ? (
<div
  style={{
    display: "block",
    position: "absolute",
    left: 0,
    right: 0,
    background: "rgba(255,255,255,0.8)",
    transition: "all .3s ease",
    top: 0,
    bottom: 0,
    textAlign: "center"
  }}
>
  <Loader>Loading</Loader>
</div>
) : null;
};

export default Spinner;

Now you should be able to see your loader. Here's Sandbox

Hope this helps

发布评论

评论列表(0)

  1. 暂无评论