cheekujha / react-table-filter Goto Github PK

can give a demo, how to use in html, not vue or react?

I am getting this warning message when using this library
Could you please me how to resolve this warning.

TableFilter Error: Should contain one or more children

code example : https://codesandbox.io/s/musing-swartz-r9ttt

To reduce file size

When I am trying to include the library with TSX file. It throws module is not available as it's is completely written in jsx.

Can you please include declare module to make the reference easier.

index.d.ts declare module 'react-table-filter': any....

Thanks in advance

Filter state should be maintained even if component unmounts

I'm trying to integrate react-table-filter with react-table-v6.

the goal is to give all the column data to rows in , but I can't send it only the column, every time it send all of the table. I may have other errors (for the filter) because I can't test it yet.

Here is my code:

import React, { Component } from "react";
import ReactTable from "react-table-v6";
import TableFilter from 'react-table-filter';

export default class Table extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
    };

    this.columns = [
      {
        accessor: "id",
        Header: "Id",
      },
      {
        accessor: "age",
        Header: "Age",
        filterMethod: (filter, row) => {
          return row[filter.id] === filter.value;
        },
        Filter: ({ }) =>
          this.customFilter({ fieldName: 'age' })
      },
    ]
  }

  customFilter = ({ fieldName }) => {
    return (
      <TableFilter
        rows={this.state.data}
        onFilterUpdate={this.filterUpdated}
      >
        {this.state.data
          .map(item => item[fieldName])
  
          .filter((item, i, s) => s.lastIndexOf(item) === i)
          .map(function (value) {
            if (value === null)
              return;
            else {
              return (
                <th filterkey={value}>
                  {value}
                </th>
              );
            }
          })}
      </TableFilter>
    );
  }

  filterUpdated = (newData, filterConfiguration) => {
    this.setState({
      "data": newData
    });
  }

  componentDidMount() {
    UserService.getData()
    .then(response => {
      this.setState({
        data: response.data, // all data are store here
      })
    })
    .catch((err) => console.error(err))
  }

  render() {
    return (
      <div>
        <ReactTable
          data={this.state.data}
          filterable
          columns={this.columns}
          pageSizeOptions={[10, 30, 50, 100]}
          className="-striped -highlight"
          defaultPageSize={10}
        />
      </div>
    )
  }
}

How to change the default words?
For example, the word "select all"

There are few cases can't click Select all button.

Current behavior:
Scenario 1

1. Unselect all results from filter
2. Start typing to filter results
3. Try to select all by check Select all

Scenario 2

1. Start filtering by input field inside filter dropdown
2. Uncheck some of the elements
3. Try to select all by top option Select all

Expected behavior:
User should be able to select/unselect all element on filtered data.

Preview of the issue - http://recordit.co/aXW2IhRur8

In case of reset filter true, the filter state is not getting removed

I am unable to see the content (getting a blank screen) of demo https://cheekujha.github.io/react-table-filter/ for IE browser where I checked with versions 10 and 11. I have added the screen shots of the same below. Can you please let me know how to fix this? Is there any configuration or settings for IE (It works fine in Chrome and Edge browsers) or any limitation for IE? Awaiting for your reply on this ASAP.
react-table-filter-IE.docx

HTML1300: Navigation occurred.
react-table-filter
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
react-table-filter
Warning: Each child in an array or iterator should have a unique "key" prop.

Check the top-level render call using . See https://fb.me/react-warning-keys for more information.
in tr
in Unknown
--_applyInitialFilters- [object Object]
"--_applyInitialFilters-"
{
[functions]: ,
proto: { }
}
BELOW Error in IE Only
The above error occurred in one of your React components:
in Unknown
in thead
in table
in div
in div
in div
in Unknown

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.
SCRIPT65535: Invalid calling object
bundle.js (430,2)
SCRIPT65535: Invalid calling object
bundle.js (8133,25)