Material-ui如何使搜索文本字段在material-table中展开
Material-UI是一个基于React的UI组件库，它提供了丰富的可重用组件，可以帮助开发者快速构建漂亮且功能丰富的用户界面。
在Material-UI中，要使搜索文本字段在material-table中展开，可以通过以下步骤实现：
- 导入所需的组件和样式：
import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField } from '@material-ui/core';
import { Search } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';- 创建一个自定义样式：
const useStyles = makeStyles((theme) => ({
searchField: {
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2),
width: 200,
},
}));- 在组件中使用material-table和搜索文本字段：
const MyTable = () => {
const classes = useStyles();
return (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>列1</TableCell>
<TableCell>列2</TableCell>
<TableCell>列3</TableCell>
<TableCell>
<TextField
className={classes.searchField}
variant="outlined"
size="small"
placeholder="搜索"
InputProps={{
startAdornment: <Search />,
}}
/>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{/* 表格内容 */}
</TableBody>
</Table>
</TableContainer>
);
};在上述代码中，我们使用了TextField组件来创建搜索文本字段，并通过InputProps属性添加了搜索图标。通过startAdornment属性，我们将搜索图标放置在文本字段的起始位置。
此外，我们还使用了makeStyles函数创建了一个自定义样式，通过searchField类名来设置搜索文本字段的样式。
这样，当我们在material-table中使用这个自定义的表格组件时，就会在表头的最后一列展示一个带有搜索功能的文本字段。
关于Material-UI的更多信息和使用方法，你可以参考腾讯云的相关产品和文档：
相关·内容
1回答
材料Ui表减少了柱间的空间
reactjs、material-ui
我有一个使用ReactJ& Material创建的表，如下所示。
她的现场测试：
我想减少列之间的空间，在第一列之后总是有很大的空间，不管我在它后面添加了多少列。就像他们有一些“间隔”风格，但不能删除它。
有小费吗？谢谢
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@m
浏览 2提问于2020-05-11得票数 2
回答已采纳
1回答
如何在Material-ui表中添加垂直列分隔符
html、css、material-ui
我已经创建了一个给定高度(比如70vh)的表格。我想要一个垂直的分隔栏，整个桌子的高度。我可以使用TableCell的CSS来添加它。但我希望垂直列分隔符应该在那里，即使我没有任何TableCell。
import React from "react";
//MUI Stuffs
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Table from "@material-
浏览 2提问于2021-01-26得票数 4
2回答
如何在Material-ui中删除整表的边框
css、reactjs、material-ui
我正在尝试在Material-ui中编辑表格，但我不想将其显示为卡片。我想删除整个表格周围的边框，但我在文档页面上找不到任何有关删除边框的内容。有人能帮我吗？ 有关组件的链接：https://material-ui.com/components/tables/#other 代码： import React from 'react';
import { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@mat
浏览 38提问于2020-07-13得票数 4
回答已采纳
2回答
是否可以使TableRow列中的图标在悬停在该行中的任意位置时更改颜色？
javascript、html、css、reactjs、material-ui
我使用material-ui 4.9.5。 我在这里为我的问题做了一个简化的例子。我有一个Table，我用一些简单的JSON数据填充它。每行数据如下所示： {
icon: {
{
iconElement: FolderIcon,
color: "red",
hoverColor: "green"
}
},
projectName: "Project1"
} 因此，每一行都可以有自己的图标、自
浏览 20提问于2020-04-27得票数 2
回答已采纳
1回答
如何在表单为子ReactJS的模式下禁用提交按钮
javascript、reactjs、material-ui、formik、yup
我在Javascript和React方面的经验很少，我需要在表单提交时禁用模式中的操作按钮，我已经在互联网上搜索过了，还没有找到解决方案。 以下是项目的结构： 国家/地区列表： import {
alpha,
Button,
makeStyles,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow
} from "@material-ui/core";
import React, { useState } from "react"
浏览 33提问于2021-08-25得票数 0
回答已采纳
43回答
无效钩子呼叫。只能在函数组件的主体内调用钩子。
javascript、reactjs、react-hooks、material-ui
我想使用React在表中显示一些记录，但是我得到了以下错误：
无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，您可能有多个React副本，参见有关如何调试和修复此问题的提示。
import React, {
Component
} from 'react';
import {
makeStyles
} from '@material-ui/core/styles';
import Table
浏览 13提问于2019-06-19得票数 233
回答已采纳
1回答
如何为MUI v4表的备用行设置不同的颜色？
reactjs、material-ui
下面是我的代码。我尝试在style.js中设置tableRowRoot，但是交替行的行背景色没有改变。我希望只是设置表行的根，这样我就不需要添加任何类或逻辑到行等。希望你们能告诉我做这件事的正确方法。 import { makeStyles } from '@material-ui/core/styles';
export default makeStyles((theme) => ({
tableRowRoot: {
'&:nth-of-type(odd)': {
backgroundColor: theme.pale
浏览 15提问于2021-10-28得票数 1
回答已采纳
1回答
Material UI :在表格的第一列中将头像和文本放在一起
reactjs、material-ui
我有这个项目，其中有这个界面，当它出现在第一列中的图片中时，我希望用户名与用户的图片放在一起，并放在一些图片的旁边，但当它出现在图片中时，用户的名字被放置在它的上方。
我该如何解决这个问题？
这是一个文件，表是在其中设计的，头部和主体都是在其中传递的。
import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody fr
浏览 16提问于2021-05-21得票数 1
回答已采纳
3回答
Material onClick to递增或递减值
javascript、arrays、reactjs、button、material-ui
我正在尝试实现一个onClick()的Material ，它将使表中的每个元素的卡路里值减少或增量，如下所示。我的代码是基于的
在这种情况下，如果我在-按钮中单击，它将将值减少到2，如果我单击+按钮，它将将值增加到4。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@materi
浏览 11提问于2020-03-25得票数 6
1回答
将param从子功能组件传递到父类组件
reactjs、react-hooks、react-component
我正在构建一个应用程序，它使用了一些React Hooks和一些类组件--这不是一个很好的方法，但我的时间很紧迫。如何使用React Hooks将数据从子功能组件传递到有状态类组件？ 我要传递的值是表行的索引吗？ 子组件： import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from
浏览 14提问于2019-10-12得票数 0
1回答
选中所有TableRow元素后显示复选框
javascript、css、reactjs、checkbox、material-ui
我有一个材料-ui表，我正在增加多选择的能力到它。我的要求如下。
Checkboxes最初都是隐藏的。- DONE
在行上悬停时，会出现它的复选框。DONE
一旦选中了一个Checkbox，其他行上的所有Checkbox元素就会不断可见。
我已经完成了前两项要求，但我正在努力完成最后一项要求。
一旦选中了所有复选框(通过更改opacity)，如何使其中的复选框可见？
到目前为止，这就是我要做的事情：
import React from "react";
import PropTypes from "prop-types";
impo
浏览 4提问于2020-05-26得票数 0
回答已采纳
1回答
在呈现中从函数返回组件
reactjs
我正在尝试从呈现函数中的另一个文件返回一个组件。所讨论的函数是AccessibleTable。
如果我在呈现中直接返回函数，就有可能这样做：
render() {
return (
<div>
<Header onLogout={this.onLogout.bind(this)}/>
<div>
{this.getInfo()}
<div style={{"height": "275px
浏览 2提问于2021-03-15得票数 1
回答已采纳
1回答
响应兄弟姐妹组件通信
javascript、reactjs、axios
我在同一页中有一个上载文件组件、delete文件组件和files表组件(使用axios显示系统中的现有文件)：
filesPage.js
import React from 'react';
import UploadFile from '../components/UploadFile'
import DeleteFile from '../components/DeleteFile'
import FilesTable from '../components/FilesTable'
function UploadFiles(
浏览 4提问于2021-02-27得票数 1
2回答
React render-pdf在新页面中打开onclick速度慢的问题
javascript、reactjs、react-pdf
我创建了一个具有一些功能的表格，每个单行都可以生成一个pdf和下载的渲染- pdf npm，我想显示当用户点击下载按钮pdf预览一个新的页面，它的工作，但渲染中的问题他们传递所有的数据行数据作为道具的页面加载它影响页面的时间它的时间有时，页面崩溃我尝试单击发送特定的数据在props它不工作很好，请帮助任何想法它为我非常充分。 感谢你的帮助 import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table fro
浏览 104提问于2021-08-03得票数 5
回答已采纳
3回答
如何在物料界面表中显示动态数据？
javascript、reactjs、axios、material-ui
我有返回一些表格数据的API。我需要在表格中显示这些数据。我不清楚如何实现这个目标。
让我们假设我希望显示存储在id和name中的字段groups。如何在资料-UI表中显示它们？
请看下面我的当前代码。它不会抛出任何错误。但两者都不显示带有数据的表。
import '../../App.css';
import React, { useEffect } from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@materia
浏览 8提问于2020-08-05得票数 2
回答已采纳
1回答
TypeError: dispatcher.useDebugValue不是一个函数
reactjs、material-ui、styles
刚开始学习反应。我不知道很多基本的事情，所以我们开始吧。
我正在尝试实现一个在ui上找到的表的示例。
得到了以下代码：
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
im
浏览 0提问于2020-12-22得票数 0
3回答
如何在material ui表单元格中隐藏溢出内容而不是换行
css、reactjs、material-ui
我正在使用material UI table组件来呈现一个表。我想在单元格中的内容溢出时显示...省略号。当前的行为是在单元格内对文本进行换行。我试着添加CSS样式，但没有用。我该如何实现这一点？
import React from "react";
// import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/Ta
浏览 1提问于2020-03-19得票数 7
回答已采纳
1回答
如何在材料UI/React中增加行间距？
javascript、reactjs、html-table、material-ui
我试图在MUI中的表中的每一行之间添加一些间距。然而，当添加borderSpacing：‘0px10px！重要’和borderCollapse：‘分离！重要’时，什么都不会发生。如何在每一行之间添加间距？这在HTML和CSS中通常很好，因此我不知道如何在mui中解决。谢谢
import React from 'react'
import { Container, Table, TableCell, TableHead, TableRow, Paper,TableBody, Avatar, Typography,Box,TableContainer } from '@mu
浏览 5提问于2022-01-14得票数 0
回答已采纳
2回答
在material ui表中绘制整个边框的左边框
reactjs、material-ui
我正在尝试处理一个表头中应该有2行的表。第一个标题中的每个单元格在第二行(在标题中)都应该有子项。到目前为止，我的设计没有清楚地显示每一列的数据。我需要为每一列绘制一个左边框。我不知道该怎么做。 这是我的code (CodeSandBox) const useStyles = makeStyles({
table: {
minWidth: 650
}
});
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table&#
浏览 32提问于2020-10-10得票数 0
回答已采纳
1回答
如何使用API返回的多个字段构建表列？
javascript、reactjs、material-ui
我需要预处理来自API的数据。原始数据的格式如下：
我希望动态地构建一个表，其中应该使用字段task_name和saved_answers来创建列。请注意，saved_answers可能包含不同的子字段，这取决于task_name。换句话说，saved_answers并不总是包含value21、value22、value23和value24。
下面我展示了一个表的例子。
============================================================================================================
浏览 1提问于2020-08-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
