1.0.13 • Published 8 months ago

react-datatable-report v1.0.13

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

react-datatable-report

This is datatable view in React.js

About

It is about view table data or report structure view, for data in react js

Features

It currently supports:

  1. Humanized column names based on object keys
  2. Sortable columns
  3. Search term highlight in the results
  4. Column visibility toggles
  5. Automatic pagination
  6. Smart data rendering
    • URLs and E-Mail addresses rendered as the href in an anchor tag <a />
    • boolean value parsing to yes/no word
    • Image URLs rendered as the src for an image tag <img />
  7. Custom override if the default behavior is unwanted for some columns
  8. Control the order of the columns

Installation

npm install react-datatable-report

Context

You can find the example with sample code and descriptions,

import React from "react";
import { FaMoneyBillAlt } from "react-icons/fa";
import ReportTable from  "react-report-datatable-component";
export default function SampleReport() {
    const data = [
        {
            "employee_name": "employee name 1",
            "salary": 200,
            "gross_salary": 100,
            "net_salary": 100,
        },
        {
            "employee_name": "employee name 2",
            "salary": 200,
            "gross_salary": 100,
            "net_salary": 100,
        },
        {
            "employee_name": "employee name 3",
            "salary": 200,
            "gross_salary": 100,
            "net_salary": 100,
        },
        {
            "employee_name": "employee name 4",
            "salary": 200,
            "gross_salary": 100,
            "net_salary": 100,
        },
    ]
    const columns = [
        {
            Header: 'S.No.',
            accessor: (row, index) => index + 1,
            Footer: '',
            align: 'right',
            width: 20
        },
        {
            Header: 'Employee Name',
            accessor: 'employee_name',
            Footer: 'Total',
            align: 'left',
            width: 20
        },
        {
            Header: 'Salary Details',
            columns: [
                {
                    Header: 'Gross Salary',
                    accessor: 'gross_salary',
                    Footer: data?.reduce((a, v) => a = a + v.gross_salary, 0),
                    align: 'right',
                    Cell: ({ value }) => (<><FaMoneyBillAlt style={{ fontSize: "16px", color: "green" }} /> <span>{value}</span></>), width: 120
                },
                {
                    Header: 'Net Salary',
                    accessor: 'net_salary',
                    Footer: data?.reduce((a, v) => a = a + v.net_salary, 0),
                    align: 'right',
                    width: 150
                },
            ],
            headerAlign: "center"
        },
        {
            Header: 'Salary',
            accessor: 'salary',
            Footer: data?.reduce((a, v) => a = a + v.salary, 0),
            align: 'right',
            width: 70
        },
    ];
    return (<div>
		<ReportDataTable columns={columns} data={data} keyField="S.No" pagination={true} exportfilename={"sampledata"}
                exportspecificheaders={true} exportheaders={true} exportspecifictheme={true} />
</div>)
}  
	

Props

NameDefaultTypeDescription
data[]{array}An array of plain objects
keyField'data'{string}The Unique Key Field for order rowdata
columns[]{array}Columns or Table Header to view the data, complex headers also allowed
paginationfalse{boolean}Pagination of the table with default 10 rows per Page
exportfilenamefalse{boolean}Filename for exported one, which is excel or pdf
exportspecificheadersfalse{boolean}Dynamically export , columns which are required in export option
exportheadersfalse{boolean}Export option for data in two format i.e., excel and pdf
exportspecificthemefalse{boolean}To enable theme to display table different style format
1.0.13

8 months ago

1.0.12

8 months ago

1.0.11

1 year ago

1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago