1.0.4 • Published 2 years ago

@inftechsol/react-data-table v1.0.4

Weekly downloads
-
License
-
Repository
github
Last release
2 years ago

@inftechsol/react-data-table

About component

It is a simle data-table component with filtering (option filter and text filter) and pagination. The filtering and the pagination is basically customizeable.

Compatibility

This component use React v18.1.0, react-dom v18.1.0, Bootstrap v5.1.3 and reactstrap v9.0.2.

Installation

npm i @inftechsol/react-data-table

Basic usage

import React from 'react';
import { DataTable } from '@inftechsol/react-data-table';

const App = () => {
    const datas = [
        {
            id: 0,
            name: 'John Smith',
            age: 36,
            occupation: 'developer'
        },
        {
            id: 1,
            name: 'Jane Doe',
            age: 25,
            occupation: 'developer'
        },
        {
            id: 2,
            name: 'Patric Smith',
            age: 42,
            occupation: 'HR manager'
        },
        {
            id: 3,
            name: 'Elizabeth Carter',
            age: 25,
            occupation: 'PR manager'
        },
        {
            id: 4,
            name: 'Daniel Peterson',
            age: 33,
            occupation: 'CEO'
        },
        {
            id: 5,
            name: 'Howard Long',
            age: 52,
            occupation: 'IT specialist'
        },
        {
            id: 6,
            name: 'Eva Porter',
            age: 33,
            occupation: 'secretary'
        }
    ];

    const columns = [
        {
            dataField: 'name',
            text: 'Name',
            filter: true,
            filterType: 'textFilter'
        },
        {
            dataField: 'age',
            text: 'Age'
        },
        {
            dataField: 'occupation',
            text: 'Occupation',
            filter: true,
            filterType: 'optionFilter',
            filterOptions: [
                {
                    id: 0,
                    value: 'developer',
                    text: 'developer'
                },
                {
                    id: 1,
                    value: 'HR manager',
                    text: 'HR manager'
                },
                {
                    id: 2,
                    value: 'PR manager',
                    text: 'PR manager'
                },
                {
                    id: 3,
                    value: 'CEO',
                    text: 'CEO'
                },
                {
                    id: 4,
                    value: 'IT specialist',
                    text: 'IT specialist'
                },
                {
                    id: 5,
                    value: 'secretary',
                    text: 'secretary'
                }
            ]
        },
        {
            dataField: 'id',
            text: 'ID',
            formatter: (cell, row) => {
                return (
                    <button type="button" key={row.id}>
                        {row.id}
                    </button>
                );
            }
        }
    ];

    return <DataTable columns={columns} datas={datas} />;
};

export default App;

Properties

- DataTable properties:
    - datas: Array (required),
    - columns: Array (required) [
        - column properties
            - dataField: string (required),
            - text: string (required),
            - filter: boolean (optional),
            - filterType: 'textFilter' || 'optionFilter' (required if filter is true),
            - filterDefaultValue: string (optional) ==> Filterinput default value or placeholder,
            - filterOptions: Array (required if filter is true) [
                {
                    - filterOptions properties:
                        - id: string || number
                        - value: string || number
                        - text: string
                }
            ],
            - formatter: () => void (optional) // returns elements (it goes between <td> and </td>)
    ]
    - className: string (optional) // default: 'react-data-table',
    - bordered: boolean (optional),
    - striped: boolean (optional),
    - paginationOptions: object {
        paginationOptions properties:
            - color: string (optional) => bootstrap 5 colors // 'success', 'warning', 'info', 'danger', 'primary', 'secondary', 'dark' // default: 'secondary',
            - count: number (required if paginationOptions passed) ==> row / page number,
            - nextText: string (optional) ==> next page button text // default: '>',
            - previousText: string (optional) ==> previous page button text // default: '<',
            - firstPageText: string (optional) ==> Back to the first page button text // dafault: '<<',
            - lastPageText: string (optional) ==> Go to the last page button text  // default: '>>',
            - rowPerPageOptions: array (required if paginationOptions passed) ==> Select inputoptions to change row per page [
                {
                    rowPerPageOptions properties:
                        - value: number,
                        - text: string
                }
            ]
    }
1.0.4

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.6.973

2 years ago

0.6.972

2 years ago

0.6.98

2 years ago

0.6.97

2 years ago

0.6.99

2 years ago

0.6.94

2 years ago

0.6.93

2 years ago

0.6.975

2 years ago

0.6.96

2 years ago

0.6.974

2 years ago

0.6.95

2 years ago

0.6.92

2 years ago

0.6.91

2 years ago

0.6.943

2 years ago

0.6.942

2 years ago

0.6.951

2 years ago

0.6.953

2 years ago

0.6.952

2 years ago

0.6.7

3 years ago

0.6.9

3 years ago

0.6.8

3 years ago

0.6.6

3 years ago

0.6.3

3 years ago

0.6.5

3 years ago

0.6.4

3 years ago

0.6.2

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.5.84

3 years ago

0.5.83

3 years ago

0.5.82

3 years ago

0.5.81

3 years ago

0.5.8

3 years ago

0.5.7

3 years ago

0.5.6

3 years ago

0.5.5

3 years ago

0.5.4

3 years ago

0.5.3

3 years ago

0.5.2

3 years ago

0.5.1

3 years ago

0.5.0

3 years ago

0.4.9

3 years ago

0.4.8

3 years ago

0.4.7

3 years ago

0.4.6

3 years ago

0.4.5

3 years ago

0.4.4

3 years ago

0.4.3

3 years ago

0.4.2

3 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.9

3 years ago

0.3.8

3 years ago

0.3.7

3 years ago

0.3.6

3 years ago

0.3.5

3 years ago

0.3.4

3 years ago

0.3.3

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.3.0

3 years ago

0.2.9

3 years ago

0.2.8

3 years ago

0.2.7

3 years ago

0.2.6

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.9

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago