react-datatable-custom-mjv2 v1.1.8

DataTable Component

A versatile and customizable data table component built with React. It supports various features such as pagination, sorting, searching, row selection, column visibility toggling, and CSV export.

Installation

Prerequisites

Ensure you have the following installed on your local machine:

• Node.js v20.14.0 or higher
• npm 10.7.0 or higher

Install the DataTable component via npm:

npm install react-datatable-custom-mjv2

Component Props

Optional Props

Usage

import {Link, useLoaderData, Navigate} from 'react-router-dom';
import React, {useEffect, useState} from "react";
import axios from 'axios';
import DataTable from "react-datatable-custom-mjv2";
import moment from 'moment-timezone';
import {Icon} from "@iconify/react";

const AwaitingShipment = () => {
    const baseUrl = '[api-base-url]';
    const headers = {
        'Content-Type': 'application/json'
    };
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);
    const [totalData, setTotalData] = useState(0);
    const [totalPages, setTotalPages] = useState(0);

    const [pageSize, setPageSize] = useState(50);
    const [pageNumber, setPageNumber] = useState(1);
    const [search, setSearch] = useState('');
    const [orderBy, setOrderBy] = useState('updated_at');
    const [sortBy, setSortBy] = useState('ASC');

    useEffect (() => {
        fetchOrders();
    }, [pageSize, pageNumber, search, orderBy, sortBy]);

    const fetchOrders = async () => {
        try {
            setLoading(true);
            const response = await axios.get(`${baseUrl}/orders`, {
                params: {
                    page_size: pageSize,
                    page_number: pageNumber,
                    status: 'awaiting_shipment',
                    search: search,
                    order_by: orderBy,
                    sort_by: sortBy
                },
                headers
            });
            if(response.status === 200 && response.data.success) {
                setData(response.data.data);
                setTotalData(response.data.meta_data.total_records);
                setTotalPages(response.data.meta_data.total_pages);
            }
            setTimeout(() => {
                setLoading(false);
            }, 500)
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    const columns = [
        {
            header: 'Order UUID',
            selector: 'order_uuid',
            sortable: true,
            order_by: 'order_uuid',
            style: {
                minWidth: '150px'
            }
        },
        {
            header: 'Aging',
            selector: (row) => (`${row.aging} ${row.aging<2?'Day':'Days'}`),
            sortable: true,
            order_by: 'aging',
            style: {
                minWidth: '100px'
            }
        },
        {
            header: 'Product IDs',
            selector: (row) => row.line_items.length > 0 ?
                <span title={row.line_items.map(item => item.product_id).join(', ')}>{row.line_items.map(item => item.product_id).join(', ')}</span>:
                <span>-</span>
            ,
            sortable: true,
            order_by: 'product_id',
            showPopupOnClick: true,
            style: {
                minWidth: '100px',
                maxWidth: '300px',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis'
            }
        },
        {
            header: 'Product Titles',
            selector: (row) => row.line_items.length > 0 ?
                <span title={row.line_items.map(item => item.product_title).join(', ')}>{row.line_items.map(item => item.product_title).join(', ')}</span>
                :<span>-</span>,
            sortable: true,
            order_by: 'product_title',
            showPopupOnClick: true,
            style: {
                minWidth: '100px',
                maxWidth: '300px',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis'
            }
        },
        {
            header: 'Carrier',
            selector: (row) => (<div className={'flex gap-2'}>
                <img src={row.carrier.carrier_image_url} hidden={!row.carrier.carrier_image_url} alt={row.carrier.carrier_name} title={row.carrier.carrier_name} width={"20px"} height={'20px'} /> {row.carrier.carrier_name}
            </div>),
            sortable: true,
            order_by: 'carrier_name',
            style: {
                minWidth: '200px'
            }
        },
        {
            header: 'Service',
            selector: 'service.service_name',
            sortable: true,
            order_by: 'service_name',
            style: {
                minWidth: '200px'
            }
        },
        {
            header: 'Ship From Name',
            selector: (row) => (<div className={'flex gap-2'}>
                {row.validations.is_ship_from_address_verified?
                    <span title={'Ship from address is verified'}><Icon icon={'material-symbols:verified-outline'} className={'text-[20px] text-[#22BB33]'} /></span>
                    :<span title={'Ship from address is not verified'}><Icon icon={'material-symbols:error-outline'} className={'text-[20px] text-[#cc0000]'} /></span>} {row.ship_from.name}
            </div>),
            sortable: true,
            order_by: 'ship_from_name',
            style: {
                minWidth: '200px'
            }
        },
        {
            header: 'Ship To Name',
            selector: (row) => (<div className={'flex gap-2'}>
                {row.validations.is_ship_to_address_verified?
                    <span title={'Ship to address is verified'}><Icon icon={'material-symbols:verified-outline'} className={'text-[20px] text-[#22BB33]'} /></span>
                    :<span title={'Ship to address is not verified'}><Icon icon={'material-symbols:error-outline'} className={'text-[20px] text-[#cc0000]'} /></span>} {row.ship_to.name}
            </div>),
            sortable: true,
            order_by: 'ship_to_name',
            style: {
                minWidth: '200px'
            }
        },
        {
            header: 'Order Number',
            selector: 'order_number',
            sortable: true,
            order_by: 'order_number',
            style: {
                minWidth: '210px',
            },
            rowStyle: {
                color: '#ff6600'
            }
        },
        {
            header: 'Reference Number',
            selector: 'reference_number',
            sortable: true,
            order_by: 'reference_number',
            style: {
                minWidth: '210px'
            }
        },
        {
            header: 'Dimension (L x W x H)',
            selector: (row) => (<>
                {row.dimensions.length} x {row.dimensions.width} x {row.dimensions.height} {row.dimensions.dimension_unit ? `(${row.dimensions.dimension_unit})`: null}
            </>),
            style: {
                minWidth: '200px'
            },
            export: false
        },
        {
            header: 'Weight',
            selector: (row) => (<>
                {row.weight} {row.weight_unit}
            </>),
            sortable: true,
            order_by: 'weight',
        },
        {
            header: 'Order Created Date',
            selector: (row) => (formatDateTime(row.created_at)),
            sortable: true,
            order_by: 'created_at',
            style: {
                minWidth: '230px'
            }
        },
        {
            header: 'Order Updated Date',
            selector: (row) => (formatDateTime(row.updated_at)),
            sortable: true,
            order_by: 'updated_at',
            style: {
                minWidth: '230px'
            }
        }
    ];

    const formatDateTime = (timestamp) => {
        return moment(timestamp).tz(moment.tz.guess()).format('DD MMMM YYYY hh:mm A');
    }

    const progressComponent = (
        <div className={"table-loading"}>
            <Icon className={'animate-spin m-auto text-[55px] text-[#ff6600]'} icon={'mingcute:loading-line'} />
        </div>
    );

    const LineItem = ({item}) => {
        return (<div className={'p-2 border-2 border-solid rounded leading-5'}>
            <h4 className={'text-md font-semibold mb-2'}>{item.product_id} <span className={'float-right'}>{item.quantity}x</span></h4>
            <p className={"mb-2 text-gray-500"}>{item.product_title}</p>
            <p className={'font-semibold'}>{item.currency_code?item.currency_code:'USD'} {item.price}</p>
        </div>)
    }

    const ExpandableComponent = (row) => {
        return (<div>
            <h4 className={'text-md font-semibold mb-4'}>Line Items</h4>
            <div className={"w-full grid grid-cols-4 gap-4"}>
                {
                    row.line_items.map((item, index) => (
                        <LineItem key={index} item={item} />
                    ))
                }
            </div>
        </div>)
    }

    return (
        <div className={"p-4"}>
          <DataTable
                    title={"Awaiting Shipment"}
                    checkbox={true}
                    checkboxValueSelector={'id'}
                    selectedCheckboxes={(checkboxes) => {
                        console.log('checkboxes',checkboxes);
                    }}
                    columns={columns}
                    data={data}
                    totalData={totalData}
                    progressPending={loading}
                    progressComponent={progressComponent}
                    defaultPageSize={pageSize}
                    pageSizeOptions={[10, 20, 50, 100, 500]}
                    highlightRowOnHover={true}

                    exportable={true}
                    columnsVisibility={true}

                    expandable={true}
                    expandableCondition={(row) => row.line_items.length > 0}
                    expandableComponent={ExpandableComponent}

                    overflowXScrollOnTop={true}

                    search={search}
                    searchPlaceholder={"Search Orders..."}
                    pageSize={pageSize}
                    pageNumber={pageNumber}
                    totalPages={totalPages}
                    orderBy={orderBy}
                    sortBy={sortBy}

                    setSearch={setSearch}
                    setPageSize={setPageSize}
                    setPageNumber={setPageNumber}
                    setOrderBy={setOrderBy}
                    setSortBy={setSortBy}
                />
        </div>
    )
}

export default AwaitingShipment;