反應材料表：數據樹中的顏色行

Question

我在我的 React 項目中使用材料表。 我有 3 個級別的數據樹。 這是第一個：

當我單擊數據樹表中第一級的 2 個項目中的第一個對其進行着色時，是否可以更容易地看到它下面的值是子元素。 像這樣：

此外，如果在我將數據傳遞給它時可以為它着色，我會更高興。 這是我傳遞數據的方式：

data={[
        {
          id: 1, // MAIN ELEMENT 
          name: "Parent",
          value: `Parent`,
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child",
          value: `Child`,
          parentId: 1,
        }]}

甚至在打開父元素之前是否有為父元素着色的選項，所以很明顯它是父元素而其他是子元素？

更新：

這是代碼沙盒示例。 正如您在打開 Parent1 時所看到的，Parent2 似乎在 Parent1 之下。 我想明確表示它不在它之下。

https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js

Answer 1

我們先來談談這個問題。 這既不是程序問題，也不是 css 問題。 這只是你如何顯示數據的問題，換句話說，只是用戶體驗。

有幾種方法可以實現，這是我的工作示例： https://codesandbox.io/s/withered-dust-hb882?file=/src/App.js

基本上我只是為父級添加一個第一列，就是這樣。

Answer 2

好的，使用 CSS 選擇器實現 onExapnd 顏色更改並不容易。 在這里，您必須為父 TR 檢查和子按鈕旋轉（90 度）檢查編寫檢查。 要在沒有 onClick 檢查的情況下更改 colors，您可以使用以下 CSS：

tr[level="0"] {
  background-color: #FF0000;
}

tr[level="1"] {
  background-color: #FF0033;
}

tr[level="2"] {
  background-color: #FF0066;
}

在 JS 方式中，您可以使用以下代碼（當然，您必須將其添加到每個表中或擴展表或使用帶有現成 rowStyle 方法的 util lib ..）

import React from "react";
import MaterialTable from "material-table";
import SearchIcon from "@material-ui/icons/Search";
import RotateLeftIcon from "@material-ui/icons/RotateLeft";
import { ArrowUpward, ChevronRight } from "@material-ui/icons";

//import './styles.css';

export default () => {
  const constPathColors = {
    1: '#FFFF00',
    2: '#FFFF33',
    3: '#FFFF66',
    4: '#FFFF99',
    5: '#FFFFCC'
  };
  return (
    <MaterialTable
      style={{ width: "100%", margin: "3%" }}
      title="Income Statement"
      icons={{
        Filter: React.forwardRef((props, ref) => <SearchIcon ref={ref} />),
        Search: React.forwardRef((props, ref) => <SearchIcon ref={ref} />),
        ResetSearch: React.forwardRef((props, ref) => (
          <RotateLeftIcon ref={ref} />
        )),
        SortArrow: ArrowUpward,
        DetailPanel: ChevronRight
      }}
      columns={[
        {
          field: "name",
          title: "Category"
        },
        {
          field: "value",
          title: "Value",

          cellStyle: {
            textAlign: "center"
          }
        }
      ]}
      data={[
        {
          id: 1, // MAIN ELEMENT
          name: "Parent 1",
          value: `SomeParentValue`
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child 1-1",
          value: `Child Value`,
          parentId: 1
        },
        {
          id: 3, //CHILD OF THE MAIN ELEMENT
          name: "Child 1-2",
          value: `Child Value`,
          parentId: 1
        },
        {
          id: 4, //CHILD OF THE CHILD ELEMENT
          name: "Child 1-2-1",
          value: `Child Value`,
          parentId: 3
        },
        {
          id: 5, // MAIN ELEMENT
          name: "Parent 2",
          value: `SomeParentValue`
        }
      ]}
      parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
      options={{
        paging: false,
        headerStyle: {
          backgroundColor: "#378FC3",
          color: "#FFF",
          fontSize: "17px",
          textAlign: "center",
          fontWeight: "bold"
        },
        rowStyle: rowData => {
          if(rowData.tableData.isTreeExpanded === false && rowData.tableData.path.length === 1) {
            return {};
          }
          const rowBackgroundColor = constPathColors[rowData.tableData.path.length];
          return {backgroundColor: rowBackgroundColor};
        }
      }}
    />
  );
};

該行在展開之前具有默認顏色：

展開后它有黃色（漸變取決於級別）背景顏色：

Answer 3

這就是我的樹視圖的樣子。 感謝left: `var(--left-before, ${0}px) ，我可以將:befores 定位在我想要的任何地方

https://i.ibb.co/Wp9XJcc/childscapture.png

viewTableTree.styles.js

import { makeStyles } from '@material-ui/core/styles';

export const useViewTableTreeStyles = makeStyles(theme => ({
  root: {
    '& .MuiPaper-root': {
      boxShadow: 'none'
    },
    '& .MuiTable-root': {
      position: 'relative',
      overflow: 'hidden'
    },
    '& .MuiTableRow-root': {
      '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.04)' },
      '&:before': {
        content: '""',
        fontWeight: theme.font.weight.black,
        fontSize: theme.font.size.xxl,
        position: 'absolute',
        left: `var(--left-before, ${0}px)`,  //important trick here!
        width: '1px',
        height: '3.2rem',
        backgroundColor: theme.palette.basic.bright
      }
    }
  }
}));

然后在 MaterialTable 組件中

ViewTableTree.js

  <div className={classes.root}>
      <MaterialTable
        icons={tableIcons}
        data={rows}
        columns={cells}
        localization={{
          header: {
            actions: ''
          }
        }}
        options={{
          selection: false,
          paging: false,
          search: false,
          showTitle: false,
          toolbar: false,
          actionsColumnIndex: -1,
          rowStyle: rowData => {
            let styles = { transition: 'transform 300ms' };
            const levels = rowData.tableData.path.length === 1 ? 0 : rowData.tableData.path.length;
            styles = { ...styles, '--left-before': `${levels * 6}px` };

            return rowData.tableData.isTreeExpanded
              ? {
                  ...styles,
                  fontWeight: 600,
                  backgroundColor: 'rgba(77, 93, 241, 0.08)'
                }
              : styles;
          }
        }}
        {...props}
      />
    </div>