antd table 宽度_reactjs - 如何使用react-reizable和antd的表为列指定最小宽度？ - SO中文参考 - www.soinside.com...
如何使用react-reizable和antd的表为列指定最小宽度？
问题描述 投票：4回答：1
我正在尝试使antd的表具有可调整大小的列。效果很好。但是，当我调整列的大小时，不能使任何列都小于其内部文本。我试图设置一个最小宽度，但是不起作用。至少在我看来。我相信应该有一些属性，可以传递给可调整大小的组件以设置最小宽度。我已经找到了示例antd表如何与react-resizable库一起使用。就在这里https://ant.design/components/table/但是即使在此示例中，其工作方式也与我的情况相同。import React, { useState } from "react";
import { Button, Icon } from "antd";
import { Resizable } from "react-resizable";
import moment from "moment";
import UniqIdsGenerator from "lib/uniqIdsGenerator";
import SearchData from "containers/SearchData";
import { StyledTable, LikeLink, Header, SearchWrapper } from "./style";
const ResizeableTitle = props => {
const { onResize, width, onClick, ...restProps } = props;
const [allowClick, setAllowClick] = useState(true);
if (!width) {
return
;}
return (
width={width}
height={0}
onResize={onResize}
onMouseDown={e => {
setAllowClick(true);
}}
onResizeStart={e => {
setAllowClick(false);
}}
onClick={e => {
if (allowClick && typeof onClick === "function") {
onClick(e);
}
}}
>
);
};
const RowActions = ({ actions, uniqId, onRowAction, record, user }) =>
actions.map(({ label, action }, fieldName) => {
let { status } = record;
return label === "log" && !statuses[status] ? null : (
key={fieldName}
id={uniqId.getTableRowAction(action)}
onClick={e => {
e.preventDefault();
onRowAction({ record, action });
}}
>
{label}
);
});
const HeaderActions = ({ actions, handleClick, uniqId, isAllowed }) =>
actions.map(({ label, action, icon }, fieldName) => {
let button;
label == "Add Upload" && !isAllowed
? (button = (
key={fieldName}
id={uniqId.getHeaderButton(fieldName)}
onClick={() => handleClick(action)}
disabled={true}
id={"disabledButton"}
>
{icon && }
{label}
))
: (button = (
key={fieldName}
id={uniqId.getHeaderButton(fieldName)}
onClick={() => handleClick(action)}
>
{icon && }
{label}
));
return button;
});
class DataTable extends React.PureComponent {
state = {
columns: []
};
components = {
header: {
cell: ResizeableTitle
}
};
uniqId = new UniqIdsGenerator(this.props.prefixId);
componentDidMount() {
const { handleClickOnTableRowAction } = this.props;
this.getColumns({
onRowAction: data => handleClickOnTableRowAction(data)
});
}
handleResize = index => (e, { size }) => {
this.setState(({ columns }) => {
const nextColumns = [...columns];
nextColumns[index] = {
...nextColumns[index],
width: size.width
};
// console.log(size.width)
return { columns: nextColumns };
});
};
getColumns = ({ onRowAction }) => {
const { columnsSchema, user } = this.props;
const { uniqId } = this;
let totalColumnsWidth = 250;
const getTotalColumnWidth = column => {
if (column.width) {
totalColumnsWidth += column.width;
}
};
const checkForWidth = column =>
((column.width && totalColumnsWidth) || column.isWidthFixed) &&
column.width;
const prepareToTable = (column, fieldName) => {
return {
title: column.label,
dataIndex: column.fieldName,
orgIndex: (text, record) => column.fieldName,
key: column.key ? column.key : column.fieldName,
width: checkForWidth(column),
defaultSortOrder: column.defaultSortOrder,
sorter: column.sortAs
? (a, b) => sortAs[column.sortAs](a, b, column.fieldName)
: "",
// filters: column.filters && column.filters,
onFilter: (value, record) => record.traceType.match(value),
// onHeaderCell: () => ({ 'id': uniqId.getTableTheadTh(fieldName) }),
render: (text, record) => {
return {
props: {
id: uniqId.getTableTbodyTd(fieldName),
className: "classNameOfCell"
},
children: addChildren(column, record)
};
}
};
};
const addChildren = (column, record) => {
if (column.render) {
return column.render(record);
} else if (column.actions) {
return (
{...column}
user={user}
uniqId={this.uniqId}
onRowAction={onRowAction}
record={record}
/>
);
}
// }
else {
return record[column.fieldName];
}
};
columnsSchema && columnsSchema.forEach(getTotalColumnWidth);
const cols = columnsSchema.map(prepareToTable);
// columnsSchema && columnsSchema.forEach(getTotalColumnWidth);
const columns =
cols &&
cols.map((col, index) => ({
...col,
onHeaderCell: column => ({
width: column.width,
onResize: this.handleResize(index)
})
}));
columns && this.setState({ columns: columns });
};
render() {
const {
data,
staticData,
getRowKey,
onSearch,
loading,
handleClickOnTableRowAction,
handleClickOnHeaderButton,
headerActionsSchema,
isSearchDisabled,
isAllowed
} = this.props;
const { uniqId } = this;
const { columns } = this.state;
return (
{!isSearchDisabled && (
id={uniqId.getHeaderInput()}
placeholder="Search"
onSearch={e => onSearch(e, staticData)}
/>
)}
actions={headerActionsSchema ? headerActionsSchema : []}
uniqId={uniqId}
handleClick={handleClickOnHeaderButton}
isAllowed={isAllowed}
/>
loading={loading}
dataSource={data}
bordered
rowKey={getRowKey}
size="small"
pagination={{ pageSize: 10 }}
onRow={(row, fieldName) => ({
id: uniqId.getTableTbodyTr(fieldName)
})}
onHeaderRow={(row, fieldName) => ({
id: uniqId.getTableTheadTr(fieldName)
})}
components={this.components}
columns={columns}
/>
);
}
}
export default DataTable;
reactjs
antd
1个回答
0
投票
指定列的最小宽度：我们需要向列对象添加minWidth的新属性columns: [
{
title: 'Date',
dataIndex: 'date',
width: 200,
minWidth: 120
},
]我们向下传递列道具：const columns = this.state.columns.map((col, index) => ({
...col,
onHeaderCell: column => ({
minWidth: column.minWidth,
width: column.width,
onResize: this.handleResize(index)
})
}));我们将道具：minConstraints={[minWidth, 0]}添加到包装器
注意：相同的方法适用于最大宽度，但我们将maxWidth属性传递给maxConstraints={[maxWidth, 0]}
热门问题