@mauja/mg-data-table-react/src/index.jsx

"Libreria para generar tablas dinamicamente"

import React from "react"


export default class DataTable extends React.Component {
    constructor(props) {
        super(props)
    }

    renderCellHeader(column) {
        if (column.hasOwnProperty("renderCellHeader")) {
            return column.renderCellHeader(column.label, column)
        }

        return column.label

    }

    renderCell(column, row) {
        const { field, label, type = "text" } = column
        let value = row[field] || ''

        if (column.hasOwnProperty("renderCell")) {
            return column.renderCell({ field, label, type, value, row })
        }

        value = this.formatValue({ ...column, value })

        return value
    }

    formatValue(params) {
        if (params.hasOwnProperty("formatValue")) {
            return params.formatValue(params)
        }
        return params.value
    }

    render() {
        const { className = '' } = this.props
        return (
            <table className={`mg-data-table table ${className}`}>
                <thead>
                    <tr className="row-header" >
                        {this.props.columns.map((column, i) => {
                            return (
                                <th
                                    key={`column-header-${i}__${column.field}`}
                                    className={`column-header column-header-${i}`}
                                    style={{ textAlign: column.align ?? 'left' }}
                                >
                                    {this.renderCellHeader(column)}
                                </th>
                            )
                        })}
                    </tr>
                </thead>
                <tbody>
                    {this.props.rows.map((row, i) => {
                        return (
                            <tr
                                key={`row-body-${i}`}
                                className={`row-body row-body-${i}`}
                            >
                                {this.props.columns.map((column, j) => {
                                    return (
                                        <td
                                            key={`column-body-${i}-${j}__${column.field}`}
                                            className={`column-body column-body-${j} column-body-${i}-${j} column-body-${i}-${j}__${column.field}`}
                                            style={{ textAlign: column.align ?? 'left' }}
                                        >
                                            {this.renderCell(column, row)}
                                        </td>
                                    )
                                })}
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        )
    }

}