时间戳

首页 > 解决方案 > 如何在 mui-datatable React.js 的第一个位置添加 SrNo (#) 列

reactjs - 如何在 mui-datatable React.js 的第一个位置添加 SrNo (#) 列

问题描述

使用 React 和MUI-Datatables创建表：首先需要添加 SrNo 列，还需要添加 Delete 和 IsActive 按钮。

import React, { useState, useEffect } from 'react';
import Grid from '@material-ui/core/Grid';
import Switch from '@material-ui/core/Switch';
import MUIDataTable from "mui-datatables";
export const Services = () => {
    const [itemList, setItemList] = useState([]);

    const [mainColumns, setMainColumns] = useState([]);

    const selectData = async () => {
        const response = await ServiceAPI(); // data from web wervice
        var data = JSON.parse(response.data);
        setItemList(data);
    };

    const createColumns = () => {
        var columns = [];

       // how to add Sr No column 

        columns.push(
            {
                label: 'ID',
                name: 'service_id',

            });

        columns.push(
            {
                label: 'Name',
                name: 'service_name',

            });

        setMainColumns(columns);
    };
    useEffect(() => {
        createColumns();
        selectData();
    }, []);

    return (
        <>
            <h3>Service</h3>
            <Grid container  >
                <Grid item xs={12}>

            <MUIDataTable
                title={"Service"}
                data={itemList}
                columns={mainColumns}  
                className="table nowrap"
            />

                </Grid>
            </Grid>
        </>
    );
}

尝试了下面的激活/停用代码，但每次都运行 OnChange()，它应该只调用点击事件（也尝试过 OnClick()）：

columns.push(
            {
                label: 'Active',
                name: 'is_active',
                options: {
                    filter: false,
                    sort: false,
                    customBodyRender: (value, tableMeta, updateValue) => {
                        const serviceID = tableMeta.rowData[0];
                        return (
                                    <Switch color="primary" checked={value} value={value} onChange={activate}/>
                            />
                        );
                    }
                }
            });

标签： reactjsmui-datatable

解决方案

请检查示例。我在这个例子中添加了序列号和删除按钮。

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import IconButton from "@material-ui/core/IconButton";
import Button from "@material-ui/core/Button";

export default class MuiDatatableSerial extends React.Component {
    render() {
        const columns = [
            {name: "sl", label: "Serial No"},
            {name: "name", label: "Name"},
            {name: "title", label: "Title"},
            {name: "location", label: "Location"},
            {name: "age", label: "Age"},
            {name: "salary", label: "Salary"},
            {
                name: "delete",
                label: "",
                options: {
                    filter: false,
                    sort: false,
                    customBodyRender: (value, tableMeta, updateValue) => {
                        return <Button
                            color="secondary"
                            onClick={(ev) =>
                                alert('deleted')
                            }> Delete
                        </Button>;
                    },
                }
            }
        ];
        const data = [
            {name: "Khabir Uddin", title: "Senior Software Engineer", location: "Dhaka", age: 38, salary: "$150,000"},
            {name: "Gabby George", title: "Business Analyst", location: "Minneapolis", age: 30, salary: "$100,000"},
            {name: "Aiden Lloyd", title: "Business Consultant", location: "Dallas", age: 55, salary: "$200,000"}
        ];

        let newData = [];
        data.map((item, index) => {
            newData.push({sl: index + 1, ...item});
        });

        const options = {
            selectableRows: "none",
            onRowsSelect: (rowsSelected, allRows) => {
            },
        };

        return (
            <MUIDataTable
                title={"ACME Employee list"}
                data={newData}
                columns={columns}
                options={options}
            />
        );
    }
}

推荐阅读