cod-fe/src/components/Global/TableList.jsx

import React, { memo, useState, useEffect, useRef } from 'react';
import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag, Segmented } from 'antd';
import {
    PlusOutlined,
    FilterOutlined,
    EditOutlined,
    DeleteOutlined,
    EyeOutlined,
    SearchOutlined,
    FilePdfOutlined,
    AppstoreOutlined,
    TableOutlined,
} from '@ant-design/icons';
import { setFilterData } from './DataFilter';
import CardDevice from '../../pages/master/device/component/CardDevice';
import CardList from './CardList';

const { Text } = Typography;

const TableList = memo(function TableList({
    getData,
    queryParams,
    columns,
    triger,
    mobile,
    rowSelection = null,
    header = 'name',
    showPreviewModal,
    showEditModal,
    showDeleteDialog,
    cardColor,
}) {
    const [gridLoading, setGridLoading] = useState(false);

    const [data, setData] = useState([]);
    const [pagingResponse, setPagingResponse] = useState({
        totalData: '',
        perPage: '',
        totalPage: '',
    });

    const [pagination, setPagination] = useState({
        current: 1,
        limit: 10,
        total: 0,
    });

    const [viewMode, setViewMode] = useState('card');

    const { useBreakpoint } = Grid;

    useEffect(() => {
        filter(1, 10);
    }, [triger]);

    const filter = async (currentPage, pageSize) => {
        setGridLoading(true);

        const paging = {
            page: currentPage,
            limit: pageSize,
        };

        const param = new URLSearchParams({ ...paging, ...queryParams });

        const resData = await getData(param);
        if (resData) {
            setTimeout(() => {
                setGridLoading(false);
            }, 900);
        }

        setData(resData.data.data ?? []);
        setFilterData(resData.data.data ?? []);

        if (resData.status == 200) {
            setPagingResponse({
                totalData: resData.paging.total_limit,
                perPage: resData.paging.page_total,
                totalPage: resData.paging.total_page,
            });

            setPagination((prev) => ({
                ...prev,
                current: resData.paging.current_page,
                limit: resData.paging.current_limit,
                total: resData.paging.total_limit,
            }));
        }
    };

    const handlePaginationChange = (page, pageSize) => {
        setPagination((prev) => ({
            ...prev,
            current: page,
            pageSize,
        }));
        filter(page, pageSize);
    };

    const screens = useBreakpoint();

    const isMobile = !screens.md; // kalau kurang dari md (768px) dianggap mobile

    return (
        <div>
            <Segmented
                options={[
                    { value: 'card', icon: <AppstoreOutlined /> },
                    { value: 'table', icon: <TableOutlined /> },
                ]}
                value={viewMode}
                onChange={setViewMode}
            />
            {(isMobile && mobile) || viewMode === 'card' ? (
                <CardList
                    cardColor={cardColor}
                    data={data}
                    column={columns}
                    header={header}
                    showPreviewModal={showPreviewModal}
                    showEditModal={showEditModal}
                    showDeleteDialog={showDeleteDialog}
                />
            ) : (
                <Row gutter={24}>
                    <Table
                        rowSelection={rowSelection || null}
                        columns={columns}
                        dataSource={data.map((item, index) => ({ ...item, key: index }))}
                        pagination={false}
                        loading={gridLoading}
                        scroll={{ y: 520 }}
                    />
                </Row>
            )}
            {/* PAGINATION */}
            <Row justify="space-between" align="middle">
                <Col>
                    <div>
                        Menampilkan {pagingResponse.totalPage} Data dari {pagingResponse.perPage}{' '}
                        Halaman
                    </div>
                </Col>
                <Col>
                    <Pagination
                        showSizeChanger
                        onChange={handlePaginationChange}
                        onShowSizeChange={handlePaginationChange}
                        current={pagination.current}
                        pageSize={pagination.pageSize}
                        total={pagination.total}
                    />
                </Col>
            </Row>
        </div>
    );
});

export default TableList;