Как добавить столбец SrNo (#) в первую позицию в MUAT-Datatable React. js - PullRequest
Новая
       47

Как добавить столбец SrNo (#) в первую позицию в MUAT-Datatable React. js

0 голосов
/ 29 февраля 2020

Создана таблица с использованием 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>
        </>
    );
}

пробовал код ниже для active / деактивировать, но 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 Ответ

0 голосов
/ 21 апреля 2020

Пожалуйста, проверьте пример. Я добавил серийный номер и кнопку удаления в этом примере. 

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