myreacttable v1.1.5

This is an NPM package for Tables, Created with ❤️ By Dhavan Singhal.

What It Is

With this NPM Package you can change your normal table with Datatable. Now You may be wonder what is a Datatable? the Datatable is a table with some filters like Search Option, Filter with date. you can edit or delete a row and with the help of callback function you can save the change in database that's it??? No!! you can hide a row or you can print the table or you can export the table as a pdf file and also you can sort any row in asec and desc orders.

How to use it

npm install myreacttable this command is all you need to install the npm package in your project. Now you must be wonder about the depandancies it is where the sad part came, this npm package is only for react project till now and you need three preinstall npm packages to use this package. Those packages are given below: "bootstrap" : install this package with npm i bootstrap command i use this package for make the table responsive along with this you have to import the below css file to make it work properly. import 'bootstrap/dist/css/bootstrap.min.css'; "framer-motion" : install this package with npm i framer-motion command i use this package for creating some animation ,if you want you can skip this but for that you have to modify the package file. "@material-ui" : install these package with npm i @material-ui/core and npm i @material-ui/icons command i use this package for using some icons and input fields. by default react use React.StrictMode in index.js you need to remove it to use this package

Don't Like The Table UI?

although i tried my best to make the UI look Good and Simple. and this table is responsive as well. but if you still reading this than i think you don't like UI, do you?? you don't have to answer that question. Yes!! you can modify the design the way you want. for make this process easy for you i attached an ID with almost every element. you can refer the Below Picture For that.

How to use this

after installing the dependencies and this package, you can use this table like the below code

    import MyReactTable from "myreacttable";
    import 'bootstrap/dist/css/bootstrap.min.css';

    const initialColumnProps = [
    {
        Header: "Name",
        id: "name_id",
        type:'text',
        Filter: "Search",
    },
    {
        Header: "Order",
        id: "order",
        type:'number',
        Filter: false,
    },
    {
        Header: "Status",
        id: "status",
        type:'select',
        Filter: "Dropdown",
        option:["On process","Complete","Failed","Pending"]
    },
    {
        Header: "Date",
        id: "date",
        type:'date',
        Filter: "daterange",
    },
    ];

    const initialDataProps = [
        ["I", 53,"Pending","11-1-2021", 0 ],
        ["A", 77,"Pending","18-1-2021", 1 ],
        ["C", 34,"Complete","31-1-2021", 2 ],
        ["B", 98,"Complete","21-3-2021", 3 ],
        ["E", 43,"Pending","13-2-2021", 4 ],
        ["F", 67,"Complete","12-3-2021", 5 ],
        ["G", 76,"Complete","22-3-2021", 6 ],
        ["H", 45,"Pending","11-2-2021", 7 ],
        ["Z", 87,"Complete","16-3-2021", 8 ],
        ["X", 65,"Pending","17-2-2021", 9 ],
        ["Y", 23,"Pending","28-3-2021", 10 ],
        ["W", 12,"Complete","27-2-2021", 11 ],
        ["Q", 54,"Complete","31-1-2021", 12 ]
    ];

    handleDataDelete = (data) => {
        this.setState({dataDelete : data})
    }

    handleDataEdit = (data) => {
        this.setState({dataEdit : data})
    } 

    <MyReactTable 
            onDataDelete={this.handleDataDelete} 
            onDataEdit={this.handleDataEdit} 
            columns={initialColumnProps}
            data={initialDataProps}
            editButton={true}
            deleteButton={true}
            />

by default react use React.StrictMode in index.js you need to remove it to use this package

Enable/Disable Edit or Delete Option

you can hide the edit or delete option from the table if you dont want it by providing false value in editButton and deleteButton props respectively. By default the value will be true for these two props. if the edit option or delete option is true than you need to provide a extra column in each row in data object that will uniquely identify that row (primary key). if both option are set to false than you don't have to provide this extra column in data object otherwise it will through the error or vice verse.

Get Edit or Delete row by callback function

you can get the row that is being edited or deleted by the user by providing a funtion in onDataEdit and onDataDelete props respectively. And with that you can save those changes in your Database.

Filters

Filter will be added in columns for use a filter for that particular column. 1) Search Option This option will help you to search a value in the particular row You can Use this by Providing the Value Search in Filter key on column data Object in respective column value. 2) Dropdown Option This option will filter all the unqiuq value and provide you an option to filter the data based on those values. Like in case you have a status column in your data and you use the Dropdown filter for that columne it'll help the user to filter the data based on all the Status available in the data. You can Use this by Providing the Value Dropdown in Filter key on column data Object in respective column value. 3) Daterange Option This option will helo you to filter the data based on the date. This option can only use for a column which have dates. if you have any other type of value like number or string in that row then it will give you a error You can Use this by Providing the Value Daterange in Filter key on column data Object in respective column value.

Datatypes for Edit Data

type will be added in columns if you are using edit option when the user click on edit button it will help to under what input need to be taken from the user for that particular column. we have four types available. 1) text It will take all kind of values. It can be alphabet, numbers or any symbol . You can Use this by Providing the Value text in type key on column data Object in respective column value. 2) Date This will take only date value. You can Use this by Providing the Value date in type key on column data Object in respective column value. 3) Number This will take numbers only You can Use this by Providing the Value number in type key on column data Object in respective column value. 4) Select if you use select as a type than it will ask user to select a value from a dropdown. The dropdown will be automatically generated from the unquie values available in the table in that column or you can provide those values from which you want the user to select a value by providing a array of values in option key on column You can Use this by Providing the Value select in type key on column data Object in respective column value

Sorting

This table provide you the feature of sorting column. This option will by on by default for the columns

Pagination

This table provide you the feature of Pagination. This option will by on by default for the columns

Show/Hide a Column

This table provide you the feature of Hide a Column. You can Hide or Show any Columns if you want. This option will by on by default for the columns

Print The Table

This table provide you the feature of printing or Save the table as PDF formation. You can Hide the Columns you don't want while printing or saving the table as PDF format. you can use the Show/Hide column feature for that. This option will by on by default for the columns

Note: raise and issue for any problem you face!