獲取過濾數據，react-bootstrap-table2

Question

是否有任何返回過濾行的全局表選項？ 忽略分頁。 匹配一個或多個textFilter所有行？

我需要標題中的值顯示過濾數據的平均值。

我在https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html上找不到任何內容

有onDataSizeChange ，但它只提供道具dataSize （行數），也僅在不使用分頁時可用。

更新評論中的第二個問題：

class App extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);

    this.state = {
      data: [...]
      filtredData: null
    };
  };

  const factory = patchFilterFactory(filterFactory, (filteredData) => {
     this.setState({filteredData}); // causes maximum update exceeded..
  });

  render() {
    return (
      <div>
         <BootstrapTable
          keyField='id'
          striped
          hover
          bootstrap4
          data={anbuds}
          filter={factory()}
          columns={columns}/>
      </div>
    );
  }
}

Answer 1

有點。

您可以這樣做的一種方法是提供過濾器道具的不同實現，並在那里獲取您需要的數據。

import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";

function patchFilterFactory(filterFactory, onFilteredData) {
  return (...args) => {
    const { createContext, options } = filterFactory(...args)
    return {
      createContext: (...args) => {
        const { Provider: BaseProvider, Consumer } = createContext(...args)
        const Provider = class FilterProvider extends BaseProvider {
          componentDidUpdate() {
            onFilteredData(this.data)
          }
        }
        return { Provider, Consumer } 
      },
      options
    }
  }
}

patchFilterFactory將位於原始過濾器提供程序和您的代碼之間，允許您獲取所需的數據。

如何使用它：

function Table() {
  const columns = [
    {
      dataField: "id",
      text: "Product ID"
    },
    {
      dataField: "name",
      text: "Product Name",
      filter: textFilter({
        delay: 0
      })
    },
    {
      dataField: "price",
      text: "Product Price",
      filter: textFilter({
        delay: 0
      })
    }
  ];

  const factory = patchFilterFactory(filterFactory, (filteredData) => {
    console.log('on filter data', filteredData)
  })

  return (
      <BootstrapTable
        keyField="id"
        data={props.products}
        columns={columns}
        filter={factory()}
      />
  );
}

我同意，這遠非理想，但據我評估，這可能是目前唯一的方法。

如果您想更改同一組件中的狀態，我建議：

  const [filteredData, setFilteredData] = React.useState([])

  const factory = patchFilterFactory(filterFactory, data => {
    setFilteredData(prevData => {
      if (JSON.stringify(prevData) !== JSON.stringify(data)) {
        return data
      }

      return prevData
    })
  })

Answer 2

我的 2¢：經過一些調查（並有意避免實現@federkun 建議的過濾器工廠包裝器），我發現我可以訪問呈現表的當前過濾器上下文。

為了訪問表屬性，我必須添加React Ref ：

class MyDataTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data
    };
    this.node = React.createRef();
  }

  ...

  render() {
    return (
      <Card>
        <CardBody>
          <BootstrapTable
            ref={n => this.node = n}
            keyField="id"
            data={this.state.data}
            ...
          />
          <Button name="click-me" onClick={() => this.handleClick()}>Click me!</Button>
        </CardBody>
      </Card>
    )
  }
}

現在，當可以使用this.node從代碼中引用<BootstrapTable> ，我可以獲得所有過濾數據（無需分頁）：

  // member of MyDataTable component
  handleClick() {
    console.log(this.node.filterContext.data);
  }

請注意，如果您以這種方式訪問​​數據，條目將不會按照您在表中看到的方式進行排序，因此如果您真的想發瘋，您可以通過這種方式過濾和排序數據：

  // member of MyDataTable component
  handleClick() {
    const table = this.node;
    const currentDataView =
      (table.paginationContext && table.paginationContext.props.data)
      || (table.sortContext && table.sortContext.props.data) // <- .props.data (!)
      || (table.filterContext && table.filterContext.data) // <- .data (!)
      || this.state.data; // <- fallback

    console.log(currentDataView);
  }

......但是這變得非常瘋狂。 這里重要的事情是從paginationContext開始 - 在它已經被切成頁面之前的任何東西。 你可以在這里檢查上下文是如何組合在一起的： react-bootstrap-table2/src/contexts/index.js 。

然而，這種方法是hacky - 完全避免公共API，攔截上下文管道，讀取每一層的輸入。 在較新的版本中情況可能會發生變化，或者這種方法可能存在我尚未發現的問題 - 請注意這一點。