@eduenano27/react-datatable v1.3.4

React DataTable

Install

npm install @eduenano27/react-datatable

DataTable\ Attributes

ITableColumn\ Attributes

ITableRow\ Attributes

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