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
1 Answer
Reset to default 5Okay 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