table2 v1.0.1

Documentation:

Esta tabla esta pensada pasa funcionar con Django Rest Framework y en conjunto la clase que viene incluida PaginationDjangoRestTable que debe ser el paginador a utilizar Esta tabla ademas soporta filtros avanzados que son los que utiliza inputSeach en concreto https://github.com/philipn/django-rest-framework-filters

Es importante mencionar que se puede utilizar con cualquier tpo de backend, mientras los endpoints retornen lo mismo que retorna django rest framework, en concreto el paginador

libraries required:

• "react": "15.5.4",

• "moment": "2.18.0" https://momentjs.com/,

  • agregar las dependencias con: npm install o yarn install

Iniciar Tabla2

const api = 'https://host.com/api/';
const query = '&organization_id=1';

function getService() {
    const params = '';
    return {
        api: api,
        query: query,
    };
}

<Table2
    service={getService()}
    data={data}
    options={options}>
</Table2>

• atributo service: Si se utiliza un filtro desde afuera de Table2 se debe pasar al atributo del componente service un objeto con la base de la api y el query inicial.

  • Ejemplo:

    • service = https://host.com/api/
    • query = &organization_id=1

• atributo data: aquí se debe pasar el objeto que retorna el servicio (este objeto es el que genera Django REST Framework cuando se utiliza la clase PaginationDjangoRestTable incluida en este repositorio)

  • Ejemplo:

{
    "next": null,
    "previous": null,
    "count": 8,
    "limit": 10,
    "current": 1,
    "final": 1,
    "results": [
        {
            "id": 55,
            "organization_id": 1,
            "rut": 116354756,
            "name": "Jhon",
            "last_names": "Carpenter",
            "phone": "+56954900747",
            "emergency_phone": "+56954900747",
            "job_title": "Dev",
        },
    ]
}

• atributo options: este el el objeto principal desde donde se define la tabla

const options = {
    className: 'table table-bordered',
    actions: {
        view: { Component: EditPerson, cssClass: 'btn btn-primary' },
        css: { whiteSpace: 'nowrap', minWidth: '182px' },
    },
    hiddenActions: !isCoordinator(),
    columns: [
        {
            title: 'RUT',
            name: 'rut',
            textIsEmpty: 'rut',
            templateWithInstance: ComponentColumn,
            inputSeachComponet: ComponentInputSearch,
            inputSearchPlaceholder: 'Ingrese Teléfono',
            inputSeach: 'icontains',
            noSorting: true,
            css: { minWidth: '50px' },
        },
    ],
};

array columns

Códigos de Ejemplo

01 Componente React para actions.view.Component

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

class ComponentActionsView extends Component {
    render() {
        return (
          <div className="btn-group">
            <Link
              to={`/url-01/${this.props.object.id}`}
              className="btn btn-danger btn-sm"
            >Delete</Link>
            <Lin
              to={`/url-02/${this.props.object.id}`}
              className={this.props.cssClass}
            >Edit</Link>
          </div>
        );
    }
}
ComponentActionsView.propTypes = {
    cssClass: PropTypes.string.isRequired,
    object: PropTypes.object.isRequired,
};

export default ComponentActionsView;

02 functions para cambiar el componente por defecto que se reenderiza en las columnas

function RUT(instance) {
    return ( <p>{rutFormat(rutAddDv(instance.rut))}</p>);
}
function User(instance) {
    return (<p>{instance.user.is_active ? 'active' : 'inactive'</p>);
}
function Phone(instance) {
    return (<p>{formatPhone(instance.phone)}</p>);
}

03 functions para cambiar el comportamiento de los input que aparecen en los header de las columnas para filtrar contenido

function JobInputSearch(options) {
    const className = options.element.className;
    return (
        <input
          onChange={(e) => options.handlerChange(e)}
          placeholder={options.element.inputSearchPlaceholder}
          className={ className ? className : 'form-control'}/>
    );
}

function RUTInputSearch(options) {
    const className = options.element.className;
    const changeFunc = function changeFunc(e) {
        let val = e.target.value;
        e.target.value = rutFormat(val);
        options.handlerChange(rutClean(val));
    };
    return (
        <input
          onChange={(e) => changeFunc(e)}
          placeholder={options.element.inputSearchPlaceholder}
          className={ className ? className : 'form-control'}
        />
    );
}

04 Cambiar uno o varios texto

"changeText": {
    "Jaime": {
        "className": "btn-primary bnt",
        "text": "Fabio",
    },
    "Claudio": {
        "className": "color-main",
        "text": "Esteban",
    },
    "Pedro Pablo": {
        "className": "btn-info bnt",
        "text": "Pedro",
    }
},