Package Exports

datatable-multiapps
datatable-multiapps/build/index.esm.js
datatable-multiapps/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (datatable-multiapps) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

datatable-multiapps

Installation

npm install datatable-multiapps

yarn add datatable-multiapps

Usage

Using NPM

1 . Require datatable-multiapps after installation

import DataTable from 'datatable-multiapps';

2 . Include datatable-multiapps component with the props

<DataTable
    title=''
    data={[]}
    headers={}
    pagination={}
    callback={}
    options={}
    color=""
    functionality={{}}
/>

Example

import DataTable from 'datatable-multiapps';

export const ExamplePage = ():JSX.Element => {

    const newData: any = [
        {
            alterado_por: "Cristoper Runco",
            fecha_creacion: "22/06/2021 - 09:09:38",
            idmaterial: "60d1ef22778d7100128ac6ad",
            nombre_archivo: "prueba",
            peso_archivo: "53.36 kb",
            ultima_edicion: "22/06/2021 - 09:09:38",
            url_archivo: "https://datatable-multiapps.example.com/example01"
        },
        {
            alterado_por: "sebCristoper Runco",
            fecha_creacion: "22/06/2021 - 14:31:30",
            idmaterial: "60d23a92778d7100128ac9de",
            nombre_archivo: "prueba imagen 1",
            peso_archivo: "219.57 kb",
            ultima_edicion: "22/06/2021 - 14:31:30",
            url_archivo: "https://datatable-multiapps.example.com/example02"
        }
    ];

    const pag: any = {
        actualPage: 1,
        hasNextPage: false,
        hasPrevPage: false,
        itemCount: 2,
        success: true,
        total: 2,
        totalPages: 1
    };

    const detailMaterial = (obj: any) => {
        console.log('received object: ', obj)
    }

    const options:any = [
        {
            label: 'Ver Material',
            onClick: detailMaterial
        }
    ]

    const head:any = [
        {
            column_key: 'url_archivo',
            column_name: 'Archivo',
            column_type: 'text'
        },
        {
            column_key: 'fecha_creacion',
            column_name: 'Fecha de creación',
            column_type: 'text'
        },
        {
            column_key: 'nombre_archivo',
            column_name: 'Nombre del Archivo',
            column_type: 'text'
        },
        {
            column_key: 'alterado_por',
            column_name: 'Modificado por',
            column_type: 'text'
        },
        {
            column_key: 'peso_archivo',
            column_name: 'Peso del archivo',
            column_type: 'text'
        }
    ];

    const getMaterialData = (dt: any) => {
        const { query } = dt;
        console.log(query);
    }

    return (
        <>
            <DataTable
                title='Materiales'
                data={newData}
                headers={head}
                pagination={pag}
                callback={getMaterialData}
                options={options}
                color="red"
                functionality={{
                    amount: false, 
                    filter: false, 
                    search: false
                }}
            />
        </>

    );
}

Options

Note:

The default color inside the DataTable component is "dark".
In the functionality option you only need to add the parameter that you do not want to show in "false" value, the other parameters are optional and have a "true" value by default.

Global	Status	Type
title	required	String
data	required	any[]
headers	required	any[]
pagination	required	Object
callback	required	Func
options	optional	any[]
color	optional	String
functionality	optional	Object

License

MIT