npm package: @mahdialikhani/react-datatable
Description: Mahdi alikhani datatable component for handle lists
Author: Mahdi Alikhani
Latest version: 1.1.24

### ReactJs dataTable package

DataTable is a ReactJs component that makes it easier to work with lists.
We are working to add new features to this component
We would be happy if you could help us.


We are In this component used the following
 packages, and you can use the guide of these packages 
 to make the best use of it.
 
 * <a href="https://www.npmjs.com/package/react-js-pagination">react-js-pagination</a>

### Installation

Install `@mahdialikhani/react-datatable` with [npm](https://www.npmjs.com/): 
```
npm i @mahdialikhani/react-datatable
```

###Usage

This component is very easy to use.

#####Example: 
```js
import React from 'react';
import DataTable from '@mahdialikhani/react-datatable';

function Users() {

    let data = {
        columns: [
            {label: 'row', name: 'id'},
            {label: 'Name', name: 'name'},
            {label: 'LastName', name: 'last_name'},
            {label: 'Email', name: 'email'},
            {label: 'Actions', name: 'actions'},
        ],
        rows: [
            {
                id: 1,
                name: 'Connor Donnelly',
                last_name : 'Johns',
                email: 'elta18@example.org'
            }
        ]
    };

    let styles = {
        countSelectorText: ['show'],
        searchText: ['search'],
    };

    const [state, setState] = useState({data: data});

    const buttons = (user) => {
        return (
            <div key={Math.random()}>
                <button type="button" className="btn btn-warning btn-sm">
                    Edit
                </button>
                <button type="button" className="btn btn-danger btn-sm">
                    Delete
                </button>
            </div>
        );
    };

    return (
        <div className="container list-div">
            <DataTable data={state.data} buttons={buttons} styles={styles}/>
        </div>
    );
}

export default Users;

```

I must say that if you do not want to work for the appearance of the lists yourself, you can create a beautiful appearance by calling the file below.
'@mahdialikhani/react-datatable/assets/Styles/styles.scss'

As you can see in the picture below, you can view your list of information on the page by calling the DataTable component

#####Example result:
![Example](http://s10.picofile.com/file/8393873076/First_output.png)
<br/><br/>

Yes, you can use this component as easily as you can see.

### Params for Personalization

You can use the following parameters to customize this component.

1- `countSelectorText: ['show']` : You can also add another text 
to this array, which will be displayed after the count selector.

##### For example:
```js
    let styles = {
        countSelectorText: ['show', 'entries']
    };
```

<br/>

2- `searchText: ['search']` : You can add another text to this 
array to display it in the list search input.

##### For example:
```js
    let styles = {
        countSelectorText: ['show', 'entries'],
        searchText: ['search', 'search...']
    };
```

<br/>

3- `ordering` : This parameter accepts an array as a value, which is used 
to move items above the list (the same as the number selector 
and search input).                
If you want the number selector to be on the right and the 
search input to be on the left, you need to arrange the two 
numbers as the first and second items and the first number is 
larger than the second.

##### For example:
```js
    let styles = {
        countSelectorText: ['show', 'entries'],
        searchText: ['search', 'search...'],
        ordering: [2, 1],
    };
```
##### Or
```js
    let styles = {
        countSelectorText: ['show', 'entries'],
        searchText: ['search', 'search...'],
        ordering: [1, 2], /*Default*/
    };
```

<br/>

4- `paginateClass` : This parameter can be a `Css` or `Bootstrap` 
class that can move the list of your page numbers below 
the list to the left or right.

##### For example: 
```js
    let styles = {
        countSelectorText: ['show', 'entries'],
        searchText: ['search', 'search...'],
        ordering: [1, 2],
        paginateClass: 'pull-left',
    };
```

##### Or
```js
    let styles = {
        countSelectorText: ['show', 'entries'],
        searchText: ['search', 'search...'],
        ordering: [1, 2],
        paginateClass: 'pull-right',
    };
```

<br/>

5- `pagination` : This parameter is an array that accepts an 
object as the first item. In this item, you can customize the 
specifications of the buttons previous and next pages.

You can also change the status of the quick transfer buttons to 
the first or last pages.

##### For example: 
```js
    let styles = {
        countSelectorText: ['show', 'entries'],
        searchText: ['search', 'search...'],
        ordering: [1, 2],
        paginateClass: 'pull-left',
        pagination: [
            {
                prevPageText: '<',
                nextPageText: '>',
                hideFirstLastPages: false
            }
        ]
    };
```

##### Or
```js
    let styles = {
        countSelectorText: ['show', 'entries'],
        searchText: ['search', 'search...'],
        ordering: [1, 2],
        paginateClass: 'pull-left',
        pagination: [
            {
                prevPageText: 'prev',
                nextPageText: 'Next',
                hideFirstLastPages: true
            }
        ]
    };
```