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

Posted 2023-02-21

【中文标题】如何在 mui-datatable React.js 的第一个位置添加 SrNo (#) 列

【英文标题】：How to add SrNo (#) column at first position at mui-datatable React.js

【发布时间】：2020-06-13 08:01:51

【问题描述】：

使用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/>
                            />
                        );
                    
                
            );

【参考方案1】：

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

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
            />
        );