django 43 react-table

default 20 rows/page

select 10 row/page, go to 2nd page. scroll content, table header sticky.

click table header to sort column

//command window

npm install react-table

-------------------------------------

//pages/albums

import React, { Component } from 'react';
import '../App.css';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { getAlbums } from '../redux/actions/getAlbums'
import ReactTable from "react-table";
import "react-table/react-table.css";

class Albums extends Component {
    constructor(props) {
        super(props);

        this.state = {

        };
    }

    componentDidMount() {
        if (this.props.loggedin) {
            this.props.dispatch(getAlbums(this.props.token));
        }
    }

    render() {
        if (!this.props.loggedin) {
            return <Redirect to='/login' />
        }

        return (
            <div style={{ padding: '10px' }}>
                {this.props.error}
                {
                    this.props.gotAlbums ?
                        <ReactTable
                            data={this.props.albums}
                            columns={[
                                {
                                    columns: [
                                        {
                                            Header: "ID",
                                            accessor: "id"
                                        },
                                        {
                                            Header: "Title",
                                            accessor: "album_title"
                                        },
                                        {
                                            Header: "Artist",
                                            accessor: "artist"
                                        },
                                        {
                                            Header: "Genre",
                                            accessor: "genre"
                                        },
                                        {
                                            Header: "Author",
                                            accessor: "author"
                                        },
                                        {
                                            Header: "Posted",
                                            accessor: "date_posted"
                                        },
                                    ]
                                },
                            ]}
                            defaultPageSize={20}
                            style={{
                                height: "400px", // This will force the table body to overflow and scroll, since there is not enough room
                                marginTop: '50px'
                            }}
                            className="-striped -highlight"
                        />
                        : null
                }
            </div>
        );
    }
}

export default connect(
    (store) => {
        return {
            token: store.login.token,
            loggedin: store.login.fetched,
            error: store.albums.error,
            albums: store.albums.albums,
            gotAlbums: store.albums.fetched
        };
    }
)(Albums);

--------------------------------------
//partials/header

import React, { Component } from 'react';
import '../App.css';
import { Menu, Input } from 'antd';
import { Link } from 'react-router-dom'
import { FaCompactDisc, FaPlus, FaEdit, FaBarcode, FaUser, FaSearch } from "react-icons/fa";
import { GiLoveSong } from "react-icons/gi";
import { IoIosLogOut, IoIosLogIn } from "react-icons/io";
import { connect } from 'react-redux';
import { reset } from '../redux/actions/logoutAction'

class Header extends Component {
    constructor(props) {
        super(props);

        this.state = {
            menu_mode: null,
            current: 'albums',
        };
    }

    componentWillMount() {
        //change menu mode based on screen width
        const mode = window.innerWidth > 434 ? "horizontal" : "inline";
        this.setState({ menu_mode: mode });
    }

    handleClick = (e) => {

        this.setState({
            current: e.key,
        });
    }

    logout = () => {
        this.props.dispatch(reset())
    }

    render() {
        return (
            <div style={{ position: 'fixed', top: 0, width: '100%' }}>
                <Menu
                    style={{ backgroundColor: '#fcefe5', zIndex: 2 }}
                    onClick={this.handleClick}
                    selectedKeys={[this.state.current]}
                    mode={this.state.menu_mode}
                >
                    <Menu.Item key="home">
                        <Link to='/'><span className='Nav-Brand'>Django</span></Link>
                    </Menu.Item>
                    <Menu.Item key="albums">
                        <Link to='/'> <FaCompactDisc /> Albums</Link>
                    </Menu.Item>
                    <Menu.Item key="songs">
                        <Link to='/'> <GiLoveSong /> Songs</Link>
                    </Menu.Item>
                    <Menu.Item key="search">
                        <Input type='text' size='small'
                            suffix={<FaSearch style={{ color: 'rgba(0,0,0,.25)', cursor: 'text' }} />}
                            placeholder='Search'
                            style={{ width: 150 }}></Input>
                    </Menu.Item>
                    {
                        this.props.loggedin ?
                            <Menu.SubMenu title={<span><FaUser /> {this.props.username}</span>} style={{ float: 'right' }}>
                                <Menu.Item key="0" onClick={() => this.logout()}>
                                    <Link to='/logout'> <IoIosLogOut /> Logout</Link>
                                </Menu.Item>
                                <Menu.Item key="1">
                                    <Link to='/'> <FaEdit /> Update Profile</Link>
                                </Menu.Item>
                                <Menu.Item key="2">
                                    <Link to='/'> <FaBarcode /> Change Password</Link>
                                </Menu.Item>
                            </Menu.SubMenu>
                            :
                            <Menu.Item key="login" style={{ float: 'right' }}>
                                <Link to='/login'> <IoIosLogIn /> Login</Link>
                            </Menu.Item>
                    }
                    <Menu.Item key="add" style={{ float: 'right' }}>
                        <Link to='/'> <FaPlus /> Add Album</Link>
                    </Menu.Item>
                </Menu>
            </div>
        );
    }
}

export default connect(
    (store) => {
        return {
            username: store.login.username,
            token: store.login.token,
            loggingin: store.login.fetching,
            loggedin: store.login.fetched,
            error: store.login.error
        };
    }
)(Header);

reference:
https://codesandbox.io/s/4qrlxjpv9w
http://chuanshuoge2.blogspot.com/2019/06/django-42-react-redux-fetch-data-with.html