import datable from 'rdatable'
import { IRenderProps } from 'rdatable/interfaces'
import 'rdatable/css/style.css'

const Component = () => (
    <Datable 
        Color="dark" 
        CurrentPage={0} 
        Data={[
            {Id:0, Name: "Carlos"}, 
            {Id:1, Name: "Daniel"},
            {Id:2, Name: "Daniel"},
            {Id:3, Name: "Daniel"},
            {Id:4, Name: "Daniel"},
            {Id:5, Name: "Daniel"},
            {Id:6, Name: "Daniel"},
            {Id:7, Name: "Daniel"},
            {Id:8, Name: "Daniel"},
            {Id:9, Name: "Daniel"},
            {Id:10, Name: "Daniel"},
            {Id:11, Name: "Daniel"},
            {Id:12, Name: "Daniel"},
            {Id:13, Name: "Daniel"},
            {Id:14, Name: "Daniel"},
            {Id:15, Name: "Daniel"},
        ]} 
        Columns={[
            { Header: "Id", Filter: true, OrderBy: true, Item: "Id" }, 
            { Header: "Nombre", Filter: true, OrderBy: true, Item: "Name", 
                Render: (props: IRenderProps) => 
                {
                    console.log(props.Data.Name)
                    return (<span>{props.Data.Name}</span>)
                } 
            }
        ]} 
        Filter=""
        ItemsPerPage={10}
        OrderBy={[
        { Column: "Id", Order: 0 }
        ]}
        ShowFilter={true}
        FilterCustomize={{
            Container_Main_Class: "row justify-content-md-end",
            Container_Sub_Class: "col-sm-12 col-md-6",
            Input_Placeholder: "Buscar",
            Input_Container_Class: "input-group mb-2",
            Input_Control_Class: "form-control"
        }}
        PaginatorCustomize={{
            Container_Main_Class: "paginator-container mt-3",
            Button_List_Class: "btn-group",
            Button_Class: "btn btn-secondary", 
            Button_Active_Class: "btn btn-success"
        }}
    />
)

export default Component