更改反应表中的列宽
Posted
技术标签:
【中文标题】更改反应表中的列宽【英文标题】：Changing column width in react-table 【发布时间】：2020-09-20 22:38:25 【问题描述】：我有一个反应表，我正在尝试更改列大小。我尝试在列中编辑“宽度”值，编辑 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";
【问题讨论】：
请尝试codesandbox.io/s/k9n3y82wov?file=/index.js:768-769 【参考方案1】：您需要使用布局挂钩（useBlockLayout、useAbsoluteLayout 或 useFlexLayout）以便应用指定的宽度。重要提示：所有这些钩子都将默认列宽设置为 150 像素。
您可以在Full Width Resizable Table 中查看示例。
如果不想使用布局钩子，可以根据需要使用getHeaderProps和getCellProps，访问minWidth和width值：
function 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>
);
【讨论】：
这真的适用于 docx 表格吗【参考方案2】：默认宽度为 150，在文档中给出。由于宽度是int 属性，所以不要使用单引号。
columns: [
Header: "First Name",
accessor: "firstName",
width: 90
,
Header: "Last Name",
accessor: "lastName"
]
【讨论】：
【参考方案3】：试试这个：你可以用同样的方式来设置行、单元格、列（它被称为prop getter模式）
在您的代码中：搜索 ...column.getHeaderProps()
将具有 style 的对象传递给 column.getHeaderProps() & 如果需要，您还可以添加更多道具以及样式：
...column.getHeaderProps(
style: width: '200px'
)
或
<th ...column.getHeaderProps()
style= ...column.getHeaderProps.style, ...getColumnStyle(column) >
在上面的代码中，getColumnStyle(column) 是我的自定义函数，用于返回该特定列的样式。
说明：它是一个无头 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
【讨论】：
以上是关于更改反应表中的列宽的主要内容，如果未能解决你的问题，请参考以下文章