startailcoon commented 6 years ago

With the usage of https://www.npmjs.com/package/react-grid-layout we can easily let the user rearenge the cards of data.

Part of discussion on #1477

@sschiessl-bcp, if you have time to work on a solution that can handle cards of data with a dynamic screen that can be aranged by easy passing the data to it, it would be perfect.

Test Code

A small test shows this code works well, but needs to be worked on to handle what we need.

import React from "react";
import ReactGridLayout from "react-grid-layout";

class DynamicGrid extends React.Component {
    render() {
        let elements = this.props.children.map(card => {
            return (
                <div key={card.i} style={{border: "1px solid #000000"}}>
                    {card.content}
                </div>
            );
        });

        return(
            <ReactGridLayout className="layout" layout={this.props.layout} cols={this.props.cols} rowHeight={this.props.rowHeight} width={this.props.width}>
                {elements}
            </ReactGridLayout>
        );
    }
};

export default DynamicGrid;

<DynamicGrid 
    cols="2"
    rowHeight="30"
    width="1200"
    layout={[
        {i: 1, x: 0, y: 0, w: 1, h: 5},
        {i: 2, x: 1, y: 0, w: 1, h: 5},
    ]}
    children={[
        {i: 1, content: marketsTab},
        {i: 2, content: buySellTab},
    ]}

/>