0

我正在研究 Laravel 和 reactJS，我正在为 Shopify 创建一个应用程序。我正在使用Polaris 数据表来显示数据。一切正常，但现在我必须根据单元格值更改单元格的颜色。对于数据表，我进行了 API 调用，并从 laravel 控制器中获取了一个数据数组。要更改单元格值，我必须编辑该数组。下面是我从控制器发送的数组。

let data =[
        ["#1007", "14-04-2021", "dummy name 1", "Approved"],
        ["#1012", "14-04-2021", "dummy name 2", "Rejected"],
        ["#1013", "14-04-2021", "dummy name 3", "Approved"],
        ["#1014", "14-04-2021", "dummy name 4", "Rejected"],
        ["#1015", "14-04-2021", "dummy name 5", "Approved"],
        ["#1016", "14-04-2021", "dummy name 6", "Approved"]
    ]

要更改单元格颜色，我必须修改此数组并将一些 HTML 添加到要编辑的单元格中，并根据单元格中的值更改颜色。

这是我正在尝试做的事情，我发现了这个用于更改单元格值的代码。

const customCellContent = (
    <span style={{ display: "inline-flex" }}>
      <Icon color="greenDark" source={CaretUpMinor} />
      <TextStyle variation="positive">75.00%</TextStyle>
    </span>
  );
  const rows = [["Gonzalo", 4, "100%", customCellContent]];

下面是我用来将数据显示到数据中的完整反应 js 代码

import React, {useState, useEffect, useCallback} from 'react';
import {Switch, Route, Link} from "react-router-dom";
import axios from "axios";
import {Card, DataTable, Page, Spinner} from '@shopify/polaris';

import Test from './test'

export default function Orders() {
    const [sortedRows, setSortedRows] = useState(null);
    const [orders, setorders] = useState(null);
    const [showSpinner, setShowResults] = useState(true);

    useEffect(() => {
        const fetchUsers = async () => {
            try {
                const store_orders = await axios.get('/store_orders');
                const get_orders   = await axios.get('/get_orders');

                setorders(get_orders.data);
                setShowResults(false);

            } catch (e) {
                console.log(e);
            }
        };
        fetchUsers();
    }, []);


    const initiallySortedRows = orders;
    const rows = sortedRows ? sortedRows : initiallySortedRows;

    const handleSort = useCallback(
        (index, direction) => setSortedRows(sortCurrency(rows, index, direction)),
        [rows],
    );

    return (
        <div>
            <div className="tableContainer">
                { showSpinner ? <div className="polarisSpinner"><Spinner accessibilityLabel="Spinner example" size="large" className="polarisSpinner"/></div> :
                    <Card>
                    <DataTable
                        columnContentTypes={[
                            'text',
                            'text',
                            'text',
                            'text',
                        ]}
                        headings={[
                            'Order',
                            'Date',
                            'Customer',
                            'Status',
                        ]}
                        rows={rows}
                        /*sortable={[false, true, false, false, true]}*/
                        defaultSortDirection="descending"
                        initialSortColumnIndex={4}
                        onSort={handleSort}
                    />
                </Card> }
            </div>
        </div>

    );

    function sortCurrency(rows, index, direction) {
        return [...rows].sort((rowA, rowB) => {
            const amountA = parseFloat(rowA[index].substring(1));
            const amountB = parseFloat(rowB[index].substring(1));

            return direction === 'descending' ? amountB - amountA : amountA - amountB;
        });
    }

}
4

0 回答 0