如何设置react-table过滤器输入字段的样式？
React-Table是一个用于构建灵活且可定制的数据表格的React组件库。它提供了丰富的功能和选项，包括过滤器功能，可以帮助我们在表格中实现数据的筛选和过滤。
要设置React-Table过滤器输入字段的样式，可以通过自定义样式类或内联样式来实现。以下是一种常见的方法：
- 自定义样式类： 首先，在React组件的CSS文件中定义一个样式类，例如：
.filter-input {
border: 1px solid #ccc; padding: 5px; border-radius: 4px;}
然后，在React组件中使用React-Table时，通过filterCellStyle属性将该样式类应用于过滤器输入字段，例如：
import ReactTable from 'react-table';
import 'react-table/react-table.css';
const columns = [
{ Header: 'Name', accessor: 'name', filterable: true, Filter: ({ filter, onChange }) => ( <input type="text" className="filter-input" value={filter ? filter.value : ''} onChange={(event) => onChange(event.target.value)} /> ), }, // 其他列配置...];
const MyTable = () => {
return <ReactTable data={data} columns={columns} />;};
在上述代码中，我们通过Filter属性自定义了过滤器的渲染，将自定义的样式类filter-input应用于输入字段。
- 内联样式：
如果你更喜欢使用内联样式，可以直接在过滤器输入字段的
style属性中设置样式，例如：
// 其他代码...
const columns = [
{ Header: 'Name', accessor: 'name', filterable: true, Filter: ({ filter, onChange }) => ( <input type="text" style={{ border: '1px solid #ccc', padding: '5px', borderRadius: '4px', }} value={filter ? filter.value : ''} onChange={(event) => onChange(event.target.value)} /> ), }, // 其他列配置...];
// 其他代码...
在上述代码中，我们直接在过滤器输入字段的style属性中设置了边框、内边距和边框圆角等样式。
无论是使用自定义样式类还是内联样式，你都可以根据自己的需求来设置过滤器输入字段的样式。这样，你就可以根据React-Table的过滤器功能来实现自定义的样式效果。
关于React-Table的更多信息和使用方法，你可以参考腾讯云的产品介绍页面：React-Table产品介绍。
相关·内容
我使用的是react-table，每一列都有一个有效的过滤器方法。但是，我似乎不知道如何设置过滤器输入字段的样式-它现在是白色的，并且与背景混合在一起。
下面是一个代码，其中的"Last Name“列是可过滤的，有一个输入字段：
我想为这个输入字段添加一些语义样式，如下所示：
<div className="ui icon input">
// Input values would go here
<i classNa
浏览 22提问于2017-06-27得票数 8
您好，我正在尝试使用此示例实现反应表过滤功能。。但我有个问题。我创建了一个不同的组件，并在其内部调用了我的react-table组件。我的意思是我的主要组件是包装表组件。有没有办法在react-table组件中获取state.filters数组？你能在这个问题上帮我吗？
我的主要组件：
……
import React from 'react'
import DataTable from '../dataTable/Datagrid'; --> imported react-table example different file as component
浏览 3提问于2021-09-13得票数 0
1回答
我有一个简单的搜索表单，只包含一个文本字段，但它有过滤器(例如，以"type:“开头的查询只搜索”type“的数据库列)。我想要的是在实际搜索词(即"type:")之前的文本以这样一种方式设置样式，即它对用户来说是一个过滤器，而不是一个搜索词。事实上，在用户输入标签后，它可能看起来像StackOverflow的标签文本字段(参见)。到目前为止，我已经在文本字段上调用了一个.keypress()方法来确定第一个术语是否真的是过滤器，但是我不确定如何设置过滤器文本的样式。如有任何帮助，我们不胜感激！
浏览 0提问于2013-01-14得票数 0
回答已采纳
3回答
我正在使用react-table创建一个可过滤的表，但是我想以我想要的方式设置它的样式。我应该直接在node_modules应用程序中更改它，还是应该创建自己的CSS文件并覆盖对元素的动态检查？
浏览 2提问于2018-12-19得票数 7
头衔几乎说明了一切。我正在寻找一种向视图公开过滤器添加占位符/帮助文本的方法。这将是在用户输入值之前出现在筛选器(在本例中为搜索字段)中的文本，然后在单击该字段或将文本输入到该值时消失。
浏览 0提问于2012-05-14得票数 8
回答已采纳
在之前的react-table 6中，只需要在列规范中添加一个show: false来隐藏一列。 如何在反应表7中实现这一点？
浏览 40提问于2020-09-10得票数 1
我有一种情况，我必须改变行的背景颜色取决于行道具。我目前正在这样做： const getTrProps = (state, rowInfo, instance) => {
if (rowInfo) {
return {
style: {
'background-color': rowInfo.original.customercomplaints.order_ref === currentOrderId ? '' : 'yellow&#
浏览 131提问于2020-10-16得票数 0
4回答
我有一个黑/黑背景图像和一个白色输入字段。我给了输入字段50%的不透明度，我希望文本/值为纯白(#fff)。但是，当我应用不透明度时，它会同时影响输入元素的背景和文本。如何只更改输入字段的背景？
浏览 4提问于2013-09-10得票数 18
回答已采纳
我决定使用react-table来构建网格。
只有一件事能有更好的UI，那就是在单击add按钮后，我想关注新项的输入字段。
我打算使用ref，但不知道如何对子项使用fowardRef
下面是我使用react表的示例：
在本例中，我希望在添加了一个新行后将重点放在字段First Name上。
更新：我可以通过使用本地autoFocus支持来关注输入。
答案
但我还是想用React Ref来处理焦点
浏览 5提问于2020-02-19得票数 3
回答已采纳
我有一个视图公开的过滤器块，我正在使用作为一个搜索表单。我想知道如何在块中显示静态文本。以下是“我的街区”的样子：
📷
本质上，我想把标题(查找A场地)显示在字段的左边，然后在两者之间显示单词"or“。如果有人知道如何将块标题移到过滤器字段的左边而不是上面，我想这也能很好地达到我的目的。尽管如此，知道如何显示静态文本还是很好的。
浏览 0提问于2012-06-23得票数 2
回答已采纳
我已经用react-table创建了一个表，并且为每一列都有一个列过滤器。在一些列中，我有日期，但当我试图过滤日期时，它不起作用。对如何实现这一点有什么建议吗？
浏览 15提问于2021-03-11得票数 0
1回答
我正在使用react-table，我想将CSS规则应用到rt-td类，它不能通过他们的应用程序接口提供的东西访问或修改。
在CSS中，我只需在样式表中覆盖CSS类即可。但是如何使用样式组件呢？我听说这是一个反模式，但我还能做什么呢？
浏览 1提问于2018-04-01得票数 0
我想在Drupal6中创建一个页面，在那里我可以显示用户在任何餐厅页面上点击的restaurants.When列表，我应该被重定向到餐厅详细信息页面。
为此: 1.)我创建了一个名为"Restaurant“的新内容类型，其中包含一些字段。2.)为餐厅创建了3-4个内容项( Restaurant1、Restaurant2、Restaurant3) 3.创建了名为: RestaurantList的视图，并为其添加了字段。然后添加了页面显示并给出了的路径
现在，当我浏览到Restaurants页面时，我只得到我的字段的标签，而没有值。如何获得值而不是标签？此外，我还想转到Restaurant
浏览 0提问于2011-10-23得票数 1
内容类型有两个字段:属性类型和卧室。
我创建了一个视图，上面的字段向访问者公开。
当我访问我的站点时，我看到-Any -是这两个字段的默认值。第一个字段是属性类型，第二个字段是卧室字段。
📷
📷
属性类型字段:
📷
卧室场地：
📷
如何用相应的字段标签替换默认值-Any？例如，对于属性类型字段，我喜欢将property看作默认值，而对于卧室字段，我喜欢在下拉列表中看到卧室作为默认值。
浏览 0提问于2020-08-12得票数 1
所以我在一个正在处理的react项目中有一个材料表，默认的过滤选项只是在你的数据上方放置一行，你可以输入任何你想要的东西。我需要做的是在表格上方做一个按钮，我可以点击它，然后点击复选框来选择我要过滤掉的内容。我想知道是否有一种方法可以通过修改material-table提供给您的内容来做到这一点，或者我是否应该将复选框选项链接到一个函数，该函数将再次获取数据并使用.filter将其过滤掉？虽然对每个复选框都这样做似乎有很长的路要走，但我还没有真正找到解决我的问题的方法。我只看到人们使用react-table来做这件事。如果有任何建议，我将不胜感激。
浏览 6提问于2020-06-07得票数 2
在react-table 6.8.6版本中，向react-table添加手动属性会禁用内部排序和过滤功能。如何在服务器端分页的情况下进行内部筛选和排序？ <ReactTable
manual
filterable={true}
/>
浏览 21提问于2020-04-27得票数 0
回答已采纳
我想在react-table中单击一行时呈现一个组件。我知道我可以使用子组件来实现这一点，但这不允许单击整行。我希望当用户单击该行上的任意位置时呈现该子组件。从他们的github页面上，我了解到我想编辑getTdProps，但并不能真正实现它。另外，该子组件是form，在保存该表单时，我希望更新该行以反映用户所做的更改并关闭该表单。任何帮助都是非常感谢的。
import React, {Component} from 'react';
import AdomainRow from './AdomainRow'
import ReactTable from
浏览 13提问于2018-02-24得票数 2
我正在更好地理解这一点，但仍然没有做到这一点。我有一个带有富文本字段的备注文档。我想在Xpages中对其进行编辑，以便用户可以为代理将生成的电子邮件输入文本。这个想法是，用户应该能够输入样式文本，希望包括粘贴的图形，并以这样的方式保存到富文本字段，以便以后的代理可以将该字段复制到电子邮件正文中。
在表单上，我选中了“将内容存储为HTML和MIME”字段。
在Xpage中，我将CKEditor直接绑定到字段(如果需要，可以将其绑定到范围变量)。
我的代理中的代码如下：
Set rtItmFrm = emlDoc.getFirstItem("Body")
Set rtItmTo =
浏览 5提问于2014-10-01得票数 1
我正在尝试在AngularJS应用程序中始终显示十进制数字。
文本中的十进制数(span/div/...)应使用与输入字段中的十进制数相同的分隔符显示。
无论使用逗号还是点都无关紧要。
如何找到浏览器在<input type="number">字段中使用的小数点分隔符？
我尝试使用toLocaleString和AngularJS的number filter，但这并不总是与输入字段匹配，因为一些浏览器不会将用户的区域设置考虑到输入字段中。
出于在移动设备上的可用性原因，我不想使用<input type="text">。
浏览 6提问于2017-07-13得票数 0
1回答
我有一个默认的列过滤器，我想知道是否有一种方法可以从一个列中排除它。您可以查看我正在使用的React-table中的一个示例：
useTable挂接中正在使用'DefaultColumnFilter‘，默认情况下所有列都在使用它
有没有办法不让某一列使用它？
浏览 2提问于2020-10-15得票数 2
我只是试着用clojurescript创建一个项目，它使用了react表。我进口这样的反应表
(:require [react-table :as rt :default ReactTable])
显然，这不是从react表导入CSS的。
在javascript+React中，它将是import "react-table/react-table.css"
问题：，我该做些什么呢？现在，我只是将CSS从react表复制到css文件夹中，并将其链接到我的index.html中。
浏览 3提问于2019-10-17得票数 4
我正在react-table上工作，我想禁用表的页面输入。 ? 正如您在上图中所看到的。我想禁用那个输入。我该怎么做呢？ 这是生成react表的代码： <Table className="-striped"
columns={this.columns}
data={this.props.stockItems}
defaultPageSize={10}
defaultFilterMethod={this.filterCaseInsensitive}
/>
浏览 17提问于2020-07-27得票数 3
回答已采纳
3回答
我正在使用React Table来构建React JS中的Table。(https://github.com/tannerlinsley/react-table)。我找不到如何在React Table中删除边框。请帮帮我，谢谢。 const tableStyle = {
border: "none",
boxShadow: "none"
};
class App extends React.Component{
render(){
const columns = [{
Header: "Id",
浏览 68提问于2019-06-21得票数 0
请告诉我如何在datatables插件的'search‘字段中设置类。我还使用了Jquery UI主题。
$('#idSmovData').dataTable( {
"sScrollY": "600px"
,"bPaginate": false
,"bFilter": true
,"bJQueryUI": true
,"bInfo": fa
浏览 0提问于2012-02-29得票数 5
回答已采纳
反应表输入错误
代码导入样式如下：
import ReactTable from 'react-table'
import 'react-table/react-table.css'
当它运行时，它显示的错误消息如下
试图导入错误：“react table”不包含默认导出(导入为'ReactTable')。
现在该怎么办？
浏览 2提问于2020-02-15得票数 2
回答已采纳
2回答
我正在尝试实现一个搜索过滤器，它可以在整个表中搜索字符。未正确应用筛选器。我使用react-table作为数据网格。我在每个输入上触发更改处理程序，然后使用filter过滤掉数据。无法达到同样的效果 如果能帮上忙，我们将不胜感激。 https://codesandbox.io/s/happy-hooks-tblde import React from "react";
import ReactDOM from "react-dom";
import { Input } from "semantic-ui-react";
import React
浏览 19提问于2019-07-02得票数 0
回答已采纳
我正在使用输入字段设置表单的样式。输入字段必须是完全透明的。输入字段本身没有问题，但一旦我开始键入，浏览器就会打开包含保存的表单数据的下拉列表，显示我之前在输入字段中输入的单词。下拉列表本身不是透明的，而是白色的。当我将鼠标悬停在一个保存的单词上时，它会出现在输入字段中，当它出现时，输入字段也会显示白色背景。
我尝试将活动、焦点和悬停状态的背景设置为透明，但似乎不起作用。我也不能在元素检查器中看到保存的表单数据下拉列表，所以我不知道如何定位它。
HTML：
<form class="" action="" method="_GET" acc
浏览 3提问于2014-10-31得票数 0
我正在构建一个通过Recurly处理付款的表单。非递归.js字段使用Bootstrap进行布局。
我可以设置包含DIV的样式，以获得与Bootstrap字段匹配的边框和边框半径，但Bootstrap设置输入字段的填充：
padding: 6px 12px;
...I认为您可以通过递归配置传递实际输入字段的样式，所以我尝试这样做：
style: {
all: {
fontFamily: 'Verdana',
fontSize: '14px',
fontWeight: '
浏览 3提问于2016-05-28得票数 1
在我的应用程序中，用户需要输入数字。在电话中，人们总是需要按下alt键才能输入数字。如何以编程方式允许用户在不按alt键的情况下在编辑字段中输入数字？请举个例子。
浏览 1提问于2010-06-24得票数 1
回答已采纳
我的rails应用程序中有一个form_for。我刚刚想出了如何覆盖输入文本字段的css。，但我不知道如何覆盖输入文本区域上的css。
好的，这就是我如何改变我的文本字段的自然样式。
CSS
.product-form input[type="text"] {
height: 26px;
border: 0px ;
}
Haml form_for
%span.product-form
= f.text_field :name, placeholder: "Name"
但是，这在文本区域= f.text_area :description上
浏览 0提问于2013-07-07得票数 1
回答已采纳
2回答
我有一个运输/账单输入表单，我在设置输入字段的样式为相同宽度时遇到了问题……
问题是：
-a字段<input type="text" size="X" />在不同的浏览器中以不同的大小呈现(请参见)。
此外，选择的字段似乎在上呈现的方式也不同。
-Chrome/safari似乎不响应选定字段的font-size属性。
任何关于如何跨浏览器设置文本输入和选择字段大小的指导都会非常有帮助。
必须为每个浏览器使用不同的sytlesheet吗？是否只针对这些输入字段？-thanks
浏览 0提问于2010-03-17得票数 6
回答已采纳
8回答
浏览器默认值
、、、、
我正在开发一个带有表单的简单页面。当我在页面中输入文本时，出现在input元素中的字符具有浏览器的默认值，在chrome中，使用开发人员工具，我可以看到字体默认为“webkit-small control”。但是将出现在页面中的其中一个字段将只是一个包含如下数据的span字段
<td>
<span id="readOnlyField">data</span>
</td>
当我呈现页面时，span字段中的数据与输入文本字段中的数据不相等。我的问题是，我如何知道浏览器应用于输入文本字段的字体和颜色？我不能使用“webkit-sm
浏览 0提问于2011-12-29得票数 2
回答已采纳
Django UserCreationForm非常有用，而且在功能上很容易使用，但是它只是将所有的东西都抛到页面上，所以所有的TextField都在一行中。
是否有布局和样式的形式？具体而言，将label和输入字段放在新的行中，并可能将一些CSS应用于整个表单和表单的各个部分。
浏览 1提问于2015-01-27得票数 1
回答已采纳
我有一个围绕组件构建的功能组件，它使用进行服务器端分页和搜索。我正在尝试为搜索实现去抖动，这样一旦用户停止输入该值，就只对服务器执行一次查询。我已经尝试过和解决方案，但仍然会针对搜索字段中键入的每个字符对服务器执行查询。
这是我的组件(编辑了不相关的信息)：
import React, {useEffect, useState} from 'react';
import ReactTable from "react-table";
import _ from 'lodash';
import classnames from 'classn
浏览 2提问于2019-04-10得票数 35
回答已采纳
我有一个给定的HTML代码，我无法修改它：
<div>
<input type="text" id="name" />
</div>
使用CSS时，我会在输入后添加一个标签(after不适用于输入字段)：
div:after {
content:'label'
}
现在我想仅根据输入字段修改标签，如何选择:after元素？
input.error + * {
color: red;
}
不幸的是，我不能使用javascript，只能使用CSS！
浏览 0提问于2017-02-21得票数 1
最近升级到了很棒的FireFox 4。但是，我想禁用浏览器自动分配给文本输入字段的自动嵌入式调整大小功能，因为我已经有了自己的调整大小功能……
如何禁用FireFox 4、Safari和Chrome等浏览器自动调整文本输入域的表单大小？
任何关于如何禁用此功能的建议都将是非常棒的！
浏览 2提问于2011-03-27得票数 0
回答已采纳
我正在进行视图集成，其中表及其字段都暴露在视图中。我想让用户根据三个字段中的一个来过滤这个视图的结果。
我想要三个字段中的每一个在一个下拉，和一个文本字段，用户可以输入搜索条件。
提交后，视图将过滤特定字段和输入的术语。
这个是可能的吗？我发现这个讨论没有解决方案：https://drupal.org/node/732458
我想我可能需要为这三个字段中的每一个创建公开的过滤器，然后稍微修改一下格式，以获得我需要它的方式。
进一步澄清：
我想公开三个过滤器，每个过滤器通过用户输入的文本搜索一个字段。我可以在视图中做到这一点--没有问题，它为三个过滤器中的每个生成三个不同的文本字段。相反，我希望
浏览 0提问于2013-12-13得票数 0
我使用react-table for作为应用程序的数据网格。我有这样一个场景，我需要显示/隐藏列出的列，并根据用户选择显示/隐藏它们。我有什么方法可以做到这一点吗？ 基本上需要有一些设置类的图标，在相同的点击，我需要显示所有可用列和基于复选框选择，我需要显示/隐藏它们。 如何从react-table中获取所有列值以显示在此下拉列表中？ 如何将此设置图标添加为列标题的一部分(我将在此列下显示id)，但此列的标题将是"Edit“标签旁边的设置图标 import * as React from 'react';
import ReactTable from 'rea
浏览 78提问于2019-06-10得票数 1
回答已采纳
3回答
我已经看到了一些很酷的效果，它们将两个文本输入字段放在一个字段中作为表单！我附上了一张图片给你看，所以你知道我的意思。有没有人知道如何创造这样的东西？
它能用CSS完成吗？
浏览 1提问于2013-02-26得票数 1
回答已采纳
我有一个React-Table，并使用React的globalFilter。过滤使用OnChange函数，但我希望将默认字符串设置为我的输入字段并触发过滤函数。这是我的组件： import React from "react";
export const GlobalFilter = ({ filter, setFilter }) => {
return (
<span>
<input
id="globalFilterOrderHistory"
className=&#
浏览 23提问于2021-09-20得票数 0
4回答
我的网格中有一个I范围从1到2000的字段。我将它指定为字段定义中的一个数字。
问题是，当我使用过滤器并输入"1000“时，当我返回过滤器输入另一个数字时，它显示"1,000.00”。我不希望过滤后的文本框显示逗号或小数点。该格式与此字段无关。
我该如何纠正这个问题呢？
提前感谢！
浏览 0提问于2013-02-15得票数 5
我使用了HTML5 required字段，但我想编辑该字段的属性。
例如：
我有用户名的输入字段。如果输入字段为空，则出现红色框，并在required中写入文本，我希望更改该框的颜色，或者更改该框的内部文本。什么是可能的解决方案。我在谷歌上搜索，但找不到合适的结果。
浏览 3提问于2014-05-27得票数 3
回答已采纳
1回答
使用react-table和react-select created下拉列表并分配给表中的td，在最后一行中，下拉值没有显示，我的意思是隐藏在表下面。
浏览 1提问于2021-01-05得票数 1
我正在应用程序上使用react-table制作交互式表。
我的目标是在单击表格单元格中的按钮时，创建一个每行都可以编辑的表。
我设计了一个EditableCell，如下所示。
import React, {useState} from "react";
export const EditableCell = ({
value: initialValue,
row: Row,
col
浏览 4提问于2020-10-07得票数 9
回答已采纳
1回答
我将通过节点js从前端接收筛选器输入，其中一些可能为null或空，但在elasticsearch查询筛选器中，所有字段都应该存在。如何在某些过滤器的输入为空的情况下获得响应？ elasticClient.search({
index: 'pubmed-index',
type: 'pubmed-paper',
body: {
query: {
bool: {
浏览 10提问于2019-01-09得票数 0
1回答
Zend_Form用户错误值解码
、、、、
用户填写表单但未填写必填字段后，将返回带有相关元素的表单，并显示错误消息-以前填写的所有字段都已重新填写，但输入的数据具有&而不是&。
zend如何填充提交并返回用户错误的表单。如何对它们过滤/运行html_entity_decode。
谢谢
浏览 1提问于2012-02-24得票数 0
回答已采纳
1回答
我见过许多关于如何使iPhone键盘弹出以更改其输入形式的示例，但是我希望输入字段成为iPhone键盘弹出的一部分。
每当我有一个输入字段时，键盘就会弹出并按下输入字段--为了让输入字段“跟随”键盘，那么它一定是“嵌入式”的--我已经看到了能够这样做的解决方案，但是我没有看到javascript代码。
是否可以使用javascript将输入字段作为键盘的一部分，或者至少要精确地遵循它？
浏览 5提问于2014-04-15得票数 0
回答已采纳
场景:当用户在输入字段中键入时，文本变得比字段宽度更长，文本会随着用户的键入而滚动。
我依靠scrollLeft来获取输入字段的滚动位置，直到最近我才意识到同样的代码在IE或Edge中不起作用(它在Chrome、Firefox和Safari中都能起作用)。
看一看，element.scrollLeft与IE/Edge是兼容的，但无论出于什么原因，它在这些浏览器中只返回0。我在stackoverflow上看到了另一个类似于我的问题，但似乎没有解决办法。
如何在IE/Edge中获取输入字段的滚动位置？
小提琴：
function inputScrollPosition () {
let inp
浏览 3提问于2018-01-19得票数 1
我正在尝试使用React Table为我的表实现服务器端过滤。然而，我在网上读到的大多数文档和文章都在列标题上实现了过滤器。 然而，我的应用布局需要filters作为一个独立的组件FilterComponent，它位于表的外部： return (
<>
<FilterComponent columns={columns} />
<TableContainer className={classes.container}>
...
</TableContainer>
&
浏览 17提问于2021-08-31得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
