react-table实操问题解决方法

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1.学习react-table网址

https://react-table.js.org/#/story/readme

2.分页处隐藏多余rows

将minRows = {0}加到设置页码处

defaultPageSize={20}
className="-striped -highlight"
minRows = {0}

3.添加样式，可以将style写到对应的colums下方。同时，可以利用react-table自带的maxwidth或者width，修改默认的宽度还有其他样式变化

columns={[
            {
              Header: "ID",
              columns: [
                {
                  Header: "ID",
                  accessor: "Id",
                  maxWidth: 60,
                  style:{color:'red'},

效果图

4.如果想要设置react-table的Header文本换行，只能在css文件中添加

white-space: normal;

5.如果想要设置react-table的Header文本垂直居中，只能在css文件中，为文本的父元素添加

align-items:center;display: -webkit-flex;justify-content:center;

6.如果想要对数据进行一些操作

学习文档中是这样引入数据的

  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          columns={[

我们可以这样

  render() {
    return (
      <div>
        <ReactTable
          data={this.props.list.map(p => {
            const myDate = new Date();
            const myTime = myDate.getTime()
            return {
              ... p,
              myTime
            };
          })}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          columns={[

7.react-table某一列的serch和filter还有sort失效

解决，只粘贴重要代码

columns: [
        { 
          sortable:false,
          filterable:false,

以上是 react-table实操问题解决方法 的全部内容， 来源链接： utcz.com/z/383585.html

回到顶部