css - 更改 react 表中的列宽

Question

我有一个 react 表，我正在尝试更改列大小。我尝试编辑列中的“宽度”值，编辑 scss 样式表中的值，并添加内联样式，但没有任何效果。我在哪里对这个 react-table 进行 css 更改？任何帮助，将不胜感激。我看到的任何示例都会在我尝试过的列区域内更改它。

import React, {useState, Fragment} from "react";
import {useTable, useFilters, useGlobalFilter, useRowSelect} from "react-table";
import dataSet from "../data";
import {IndeterminateCheckbox} from './TableCheckbox';


function DeployTable() {

    function DefaultColumnFilter({
                                     column: { filterValue, preFilteredRows, setFilter },
                                 }) {
        const count = preFilteredRows.length

        return (
            <input
                value={filterValue || ''}
                onChange={e => {
                    setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
                }}
                placeholder={`Search ${count} records...`}
            />
        )
    }

    const [data] = useState(dataSet);

    const [columns] = useState([

        {
            width:'20',
            Header: "Deploy Id",
            accessor: "deploy_id"
        },
        {

            Header: "Requestor",
            accessor: "requestor",
            filter: "fuzzyText"
        },
        {
            Header: "Market",
            accessor: "market"
        },
        {
            Header: "Email",
            minWidth: 50,
            maxWidth: 50,
            accessor: "email"
        },
        {
            Header: "Environment",
            accessor: "environment"
        },
        {
            Header: "Completed Date",
            accessor: "completed_date"
        },
        {
            Header: "Deploy Group",
            accessor: "deploy_group"
        },
        {
            Header: "Job Status",
            accessor: "job_status"
        },
        {
            Header: "CRQ",
            accessor: "crq"
        }

    ]);
    const defaultColumn = React.useMemo(
        () => ({
            // Let's set up our default Filter UI
            Filter: DefaultColumnFilter,
        }),
        []
    )
    const filterTypes = React.useMemo(
        () => ({
            text: (rows, id, filterValue) => {
                return rows.filter(row => {
                    const rowValue = row.values[id];
                    return rowValue !== undefined
                        ? String(rowValue)
                            .toLowerCase()
                            .startsWith(String(filterValue).toLowerCase())
                        : true;
                });
            }
        }),
        []
    );
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow
    } = useTable({
            columns,
            data,
            defaultColumn,
            filterTypes
        },
        useFilters,
        useGlobalFilter,
        useRowSelect,
        // Here we will use a plugin to add our selection column
        hooks => {
            hooks.visibleColumns.push(columns => {
                return [
                    {
                        id: 'selection',
                        // Make this column a groupByBoundary. This ensures that groupBy columns
                        // are placed after it
                        groupByBoundary: true,
                        // The header can use the table's getToggleAllRowsSelectedProps method
                        // to render a checkbox
                        Header: ({ getToggleAllRowsSelectedProps }) => (
                            <div>
                                <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
                            </div>
                        ),
                        // The cell can use the individual row's getToggleRowSelectedProps method
                        // to the render a checkbox
                        Cell: ({ row }) => (
                            <div>
                                <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
                            </div>
                        ),
                    },
                    ...columns,
                ]
            })
        });

    return (
        <Fragment>
            <table {...getTableProps()}  >
                <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <th {...column.getHeaderProps()}>{column.render("Header")}
                                <div>{column.canFilter ? column.render('Filter') : null}</div></th>
                        ))}
                    </tr>
                ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row);
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                            })}
                        </tr>
                    );
                })}
                </tbody>
            </table>
        </Fragment>
    );
}

export default DeployTable;

在样式表中。

    .Button {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 10px;
  font-size: 14px;
}
body {
  background-color: #d1e5f0;
  font: 14px sans-serif;
}

#container {
  width: 100%;
  height: 100%;
  position: relative;
}

#title {
  font: 26px sans-serif;
  position: absolute;
  top: -40px;
  left: 450px;
}

#FilterableTable {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 40px;
  left: 20px;
}

.SearchBar {
  display: inline;
  position: relative;
  left: 1%;
}

.SearchBar input {
  position: relative;
  left: 2%;
}

.Button {
  display: inline;
  position: relative;
  left: 1%;
}


table {
  empty-cells: show;
  position: initial;
  top: 40px;
  left: 20px;
  border-collapse: collapse;
  margin-bottom: 20px;
  margin-top: 20px;
}

table a:link, a:visited { text-decoration: none; }

table a:hover, a:active { text-decoration: underline; }

table, th, td { border: 1px solid black; }
table, th, tr { border: 1px solid black; }

td, th {
  padding: 5px;
  text-align: center;
  height: 20px;
}

th {
  background-color: #4393c3;
  color: #d9f0a3;
}

td { background-color: #92c5de; }

tr { background-color: #92c5de; }

tr:hover td { background-color: #edf8b1; }
tr:hover tr { background-color: #edf8b1; }

/*
This query will take effect for any screen smaller than 480px.
    */
@media only screen and (max-device-width: 480px) {



  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
    display: block;
  }
  table{
    border: none;
    width: 100%;
    left: 0px;
    padding-right: 40px;
    height: 400px;
    overflow-y: scroll;
  }
  tbody{
    border: none;
    width: 100%;
    left: 0px;

  }
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin: 0 0 1rem 0;
  }
  .ReactTable .rt-thead {
    overflow-y: scroll;
  }


  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
  td:nth-of-type(1):before { content: "Select"; }
  td:nth-of-type(2):before { content: "Deploy ID"; }
  td:nth-of-type(3):before { content: "Requestor"; }
  td:nth-of-type(4):before { content: "Market"; }
  td:nth-of-type(5):before { content: "Env"; }
  td:nth-of-type(6):before { content: "Group"; }
  td:nth-of-type(7):before { content: "Deploy Date"; }
  td:nth-of-type(8):before { content: "Approver"; }
  td:nth-of-type(9):before { content: "Completed Date"; }
  td:nth-of-type(10):before { content: "CRQ"; }
  td:nth-of-type(11):before { content: "Job Status"; }
}

Answer 1

试试这个:您可以设置样式 行、单元格、列 以同样的方式(它被称为 prop getter 模式)

在您的代码中:搜索 ...column.getHeaderProps()

使用 传递一个对象款式到 column.getHeaderProps() & 如果需要，您还可以添加更多 Prop 以及样式:

...column.getHeaderProps({
                          style: {width: '200px'}
                         })

或者

<th {...column.getHeaderProps()}
style= {{ ...column.getHeaderProps.style, ...getColumnStyle(column) }} >

在上面的代码中， getColumnStyle(column) 是我的自定义函数，我在其中返回该特定列的样式。

说明:它是一个 headless UI 库。意思是，它只提供逻辑而没有 UI(构建你自己的 UI)，我们可以随意设置表格的样式，这被称为 prop getter 模式。您可以在此处阅读更多信息: https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters

对于样式单元格和行:https://github.com/tannerlinsley/react-table/discussions/2186