How to add SrNo (#) column at first position at mui-datatables React.js

Question

Created table using React and MUI-Datatables: need to add SrNo column at first, also need to add Delete and IsActive button.

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

tried below code for active/deactivate, but OnChange() is run every time, which should call on only click event (also tried 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}/>
                            />
                        );
                    }
                }
            });

Khabir · Accepted Answer · 2020-04-20 21:17:56Z

Please check example. I have added serial number and delete button in this example.

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

Collectives™ on Stack Overflow

How to add SrNo (#) column at first position at mui-datatables React.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related