cheekujha / react-table-filter Goto Github PK
View Code? Open in Web Editor NEWCreate Filters on table column items(like Excel)
License: MIT License
Create Filters on table column items(like Excel)
License: MIT License
can give a demo, how to use in html, not vue or react?
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
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)
How to change the default words?
For example, the word "select all"
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
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>
)
}
}
In case of reset filter true, the filter state is not getting removed
To reduce file size
There are few cases can't click Select all
button.
Current behavior:
Scenario 1
Select all
Scenario 2
Select all
Expected behavior:
User should be able to select/unselect all element on filtered data.
Preview of the issue - http://recordit.co/aXW2IhRur8
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.