React DataTable

Install

npm install @eduenano27/react-datatable

DataTable<T> Attributes

| Attribute | Type | Description | Default | | ----------------- | ------------------ | -------------------------------- | ----------------- | | autoRefresh | number | Seconds to refresh table data | disabled | | showLimit | boolean | Show row limit | false | | showSearch | boolean | Show search box | false | | showPagination | boolean | Show pagination | true | | src | string | API Endpoint | null | | className | string | Table container class name | null | | columns | ITableColumn<T>[] | Table columns | null |

ITableColumn<T> Attributes

| Attribute | Type | Description | | ----------------- | --------------------------------- | --------------------- | | caption | any | Column header | | captionClass | string | Column header class | | row | (props: ITableRow<T>) => any | Row value | | cellClass | (props: ITableRow<T>) => string | Row class |

ITableRow<T> Attributes

| Attribute | Type | Description | | ------------- | ----------- | ----------------------- | | row | <T> | Row value | | flush | () => void | Force refresh API data |

FAQ

· Crash when invoke `flush`: You have to replace this on table column `row: ColumnComponent,` by `row: row => <ColumnComponent { ...row }/>,`

Example

import React from "react";
import DataTable from "@eduenano27/react-datatable";

interface IFakeUser {
    id: number,
    name: string,
    email: string
}

export default function TableComponent() {
    return (
        <DataTable<IFakeUser>
            showLimit
            showSearch

            src='/api/players'

            header={ ({ limit, search, flush }) => <div>Header</div> }

            columns={ [
                {
                    caption: 'ID',
                    captionClass: 'text-center',

                    row: ({ row }) => row.id,
                    cellClass: ({ row }) => 'text-center'
                },
        
                {
                    caption: 'Nombre',
                    captionClass: 'text-center',

                    row: ({ row }) => row.name,
                    cellClass: ({ row }) => 'text-center'
                },
                
                {
                    caption: 'Opciones',
        
                    row: ({ row, flush }) => {
                        return (
                            <div>
                                <a href={ `mailto:${ row.email }` }>{ row.email }</a>
                                <button onClick={ flush }>test reload ({ row.id })</button>
                            </div>
                        );
                    }
                }
            ] }/>
    );
}