MDBDataTable：当数据是 json 文件时，如何在列中添加按钮？

Question

我的 MDBTable 如下所示：

//import things
const DatatablePage = () => {
    const data = {
        columns: [
            {
                label: 'Stock Code',
                field: 'StockCode',
                sort: 'asc',
                width: 150
            },
            {
                label: 'Item Description',
                field: 'ItemDes',
                sort: 'asc',
                width: 270
            },
            {
                label: 'Unit Price',
                field: 'UnitPrice',
                sort: 'asc',
                width: 200,
            },
            {
                label: 'In Stock',
                field: 'QUANTITY',
                sort: 'asc',
                width: 100
            },
            {
                label: 'Add to Cart',
                field: null,
                sort: 'asc',
                width: 150
            }
        ],
        rows: table
    };

    return (
        <MDBDataTable
            striped
            bordered
            small
            hover
            theadColor="blue lighten-1"
            data={data}
            btn
            className="blueTable"
        />
    );
}

export default DatatablePage;

JSON 文件如下所示（例如一个示例）：

[{"StockCode":"72800B","ItemDes":"4 PURPLE FLOCK DINNER CANDLES","UnitPrice":2.55,"QUANTITY":17},..]

我希望列 "Add To Cart" 有一个 MDBButton。我怎么做？我搜索了高低，我发现我必须将那个 MDBButton 插入到每个对象的 JSON 文件中。还有其他办法吗？

Answer 1

您可以直接在准备 table 行数据的地方设置定义按钮：

const table = [
    {..., 
        addBtn : <button className="btn btn-primary" onClick={() => this.addToCart()}>Add</button>
    }
]

并且在列中定义同名的字段属性 addBtn:

 {
     label: 'Add to Cart',
     field: addBtn
 }

Answer 2

在 columns 对象中，您可以像这样添加一个操作按钮

{
   label: "Action",
   field: "action",
}

在行对象中，添加一个 link 如下所示

{
   action: <Link to='/view' className='btn btn-success btn-sm'>View</Link>
}

MDBDataTable：当数据是 json 文件时，如何在列中添加按钮？

MDBDataTable: how to add a button in a column when data is a json file?

javascript

reactjs

mdbootstrap