React DataTable

Install

npm install @eduenano27/react-datatable

DataTable\ 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\[] | Table columns | null |

ITableColumn\ Attributes

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

ITableRow\ Attributes

| Attribute | Type | Description |
| ------------- | ----------- | ----------------------- |
| row | \ | 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 => ,

Example

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

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

export default function TableComponent() {
return (

showLimit
showSearch

src='/api/players'

header={ ({ limit, search, flush }) =>

Header

}

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 (

mailto:${ row.email } }>{ row.email }
test reload ({ row.id })



);
}
}
] }/>
);
}
``