我有一个反应表，我正在尝试更改列的大小。我试过编辑列中的“宽度”值，编辑 scss 样式表中的值，并添加内联样式，但没有任何效果。我在哪里对这个反应表进行 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"; }
}
您需要使用布局挂钩（useBlockLayout、useAbsoluteLayout 或 useFlexLayout）以便应用指定的宽度。重要提示：所有这些钩子都将默认列宽设置为 150px。
您可以在React Example: Column Sizing和Full Width Resizable Table中看到v7的示例。
如果你不想使用布局钩子，你可以根据需要使用
getHeaderPropsgetCellPropsminWidthwidthfunction Table({ data }) {
const columns = useMemo(
() => [
{
Header: 'Name',
accessor: 'name',
maxWidth: 400,
minWidth: 140,
width: 200,
},
{
Header: 'Qty',
accessor: 'quantity',
maxWidth: 70,
minWidth: 50,
width: 60,
},
],
[],
);
const {
getTableBodyProps,
getTableProps,
headerGroups,
rows,
prepareRow,
} = useTable({ columns, data, getRowId });
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th
{...column.getHeaderProps({
style: { minWidth: column.minWidth, width: column.width },
})}
>
<span>{column.render('Header')}</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps({
style: {
minWidth: cell.column.minWidth,
width: cell.column.width,
},
})>
{cell.render('Cell')}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
);
}
试试这个：您可以以相同的方式设置行、单元格、列的样式（这被称为道具获取器模式）
在您的代码中：搜索 ...column.getHeaderProps()
将具有 style 的对象传递给 column.getHeaderProps() & 如果需要，您还可以添加更多道具和样式：
...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
默认宽度为 150，在文档中给出。由于宽度是
intcolumns: [
{
Header: "First Name",
accessor: "firstName",
width: 90
},
{
Header: "Last Name",
accessor: "lastName"
}
]
在TanStack Table v8（此React Table v7的继承者）中，要设置width，您可以在列定义中设置
sizecolumnHelper.accessor('myCol', {
size: 70,
cell: (info) => info.getValue(),
footer: (info) => info.column.id,
})
参考：https://tanstack.com/table/v8/docs/api/features/column-sizing#size
我正在使用 TanStack Table v8。我在列中定义了一个大小，并用它来改变表格的宽度，就像这样。
const columns = [
{
header: 'Name',
cell: (info) => info.getValue(),
accessorKey: 'title',
size: 100,
},
{
header: 'Category',
cell: (info) => info.getValue(),
accessorKey: 'category',
size: 100,
},
{
header: 'Description',
cell: (info) => info.getValue(),
accessorKey: 'description',
},
];
桌子
<table style={{ width: '100%' }}>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
colSpan={header.colSpan}
style={{
width:
header.getSize() !== 150 ? header.getSize() : undefined,
}}
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
...
</tbody>
</table>
它对我不起作用。但我设置
table-layout: fixed<table style={{ tableLayout: 'fixed', width: '100%' }}>
现在它工作正常。