如何打破MUIDataTable列单元格内容
const columns = [
{
name: "id", // field name in the row object
label: "S.No.", // column title that will be shown in table
options: {
customHeadRender: ({index, ...column}) =>{
return (
<TableCell key={index} style={columnStyleWithWidth}>
<span style={{marginLeft:18}}>S.NO.</span>
</TableCell>
)
},
setCellProps: () => ({
align: "center",
})
}
},
{
name: "name",
label: "Company Name",
options: {
customHeadRender: ({index, ...column}) =>{
return (
<TableCell key={index} style={columnStyleWithWidth1}>
<span style={{marginLeft:18}}>COMPANY NAME</span>
</TableCell>
)
},
setCellProps: () => ({
align: "center",
})
}
},
{
name: "paid_date",
label: "COMMENT",
options : {
customHeadRender: ({index, ...column}) =>{
return (
<TableCell key={index} style={{textAlign:"center",position: "sticky",overflowWrap:'break-word'}} >
<span style={{"word-wrap": "break-word"}}>COMMENT</span>
</TableCell>
)
},
setCellProps:()=>({
align:"center",
style: { overflowWrap: "break-word" },
}),
}
},
{
name: "paid_date",
label: "DIVISION",
options : {
customHeadRender: ({index, ...column}) =>{
return (
<TableCell key={index} style={{textAlign:"center",position: "sticky"}}>
<span style={{marginLeft:18}}>DIVISION</span>
</TableCell>
)
},
setCellProps:()=>({
align:"center"
})
}
},
{
name: "paid_date",
label: "PAID DATE",
options : {
customHeadRender: ({index, ...column}) =>{
return (
<TableCell key={index} style={{textAlign:"center",position: "sticky"}}>
<span style={{marginLeft:18}}>PAID DATE</span>
</TableCell>
)
},
setCellProps:()=>({
align:"center"
})
}
},
{
name: "amount",
label: "AMOUNT",
className:"text-right",
options: {
customHeadRender: ({index, ...column}) =>{
return (
<TableCell key={index} style={{textAlign:"right",position: "sticky"}}>
<span style={{marginLeft:18}}>AMOUNT</span>
</TableCell>
)
},
setCellProps: () => ({
align: "right",
})
},
},
{
name: "id",
label: "ACTION",
options: {
customHeadRender: ({index, ...column}) =>{
return (
<TableCell key={index} style={{textAlign:"right",position: "sticky"}} className="pr-8">
<span >ACTION</span>
</TableCell>
)
},
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{textAlign:"right"}} className="pr-8" >
{/* <Link to={"/invoice/" + tableMeta.rowData[4]}> */}
<Tooltip title="View More">
<Icon color="error" onClick={e=>removeData(tableMeta.rowData[6])}>delete</Icon>
</Tooltip>
<Tooltip title="View More">
<Icon color="secondary" onClick={e=>setreceiptid(tableMeta.rowData[6])}>edit</Icon>
</Tooltip>
<Link to={"/SingleReceipts/" + tableMeta.rowData[6]}>
<Tooltip title="View More">
<Icon color="primary">remove_red_eye</Icon>
</Tooltip>
</Link>
</div >
)
},
},
},
];
如何将单词显示到MUIDataTable列单元格内的下一行。我尝试过style={{overflowWrap:“break word”}，但它对我无效。在上面的代码setCellprops:（）中定义了样式：{overflowWrap:“break word”}，但它不起作用。
共有1个答案
MUIDatable单元格内容中断字由代码示例中提到的以下代码解决。MUIDatable单元格：{head:{fontSize:“13px”，padding:“12px 0px”}，root:{fontSize:“14px”，空格：“pre wrap”，wordBreak:“中断字”，padding:“12px 8px 12px 0px”，}，}，
-
我是MUI新手，希望将列的内容向右对齐。我的代码如下所示： 这是显示的：桌子图片 因此，我想将“Montantárégler”列中的所有数字向右对齐。有人能帮忙吗。
-
问题内容： 这是整个页面*可包装的内容在main.css文件中定义 这是整个页面： 每当我提交时，它就会延伸。 此页面也在div内。我是否还需要设置div和表格的宽度？ 问题答案： 使用该表，并在TD。 请参阅以下示例： 演示：
-
问题内容： 小提琴说明了一切。我想要一个仅限CSS的解决方案，将表的宽度限制为div的宽度。长字符串应被打断（但是您可以看到它不是），这将导致表溢出。 我不想使用任何像素宽度。这应该是完全流畅的。 问题答案： 大家看看
-
问题内容： 我有一个由用户创建的单元格调用的表视图。每个单元都有文本视图。我想通过“文本视图”的内容更改单元格的高度。这是我尝试的： 问题答案： 绑定您与来自四面八方的使用边际约束。（ 前置，顶部和底部的约束 ） 禁用textView滚动 在 viewDidLoad（）中 添加以下内容。 这将使您的单元格大小根据您的textview内容大小。 看一下结果： 您无需编写 heightForRowAt
-
我有一个预定义的excel文件，这是一种形式，其中大部分的信息已经提到，但我必须只输入姓名，地址等细节从我的应用程序用Java。 我可以存储单元格（如A12、B20等），并使用Apache POI库和方法轻松地更新这些单元格。但我希望它是动态的。例如，如果用户将名称单元格从A12更改为B12，Java代码不应该被修改。
-
setColumn 样式影响范围为整列。 设置 range 参数为 A1:D1，第一反应是设置第一行的前四个单元格样式，但是实际效果确是设置 第一列、第二列、第三列、第四列 整列。 函数原型 setColumn(string $range, double $width [, resource $formatHandler]); string $range $config = ['path' =>