Code Monkey home page Code Monkey logo

react-structured-filter's Introduction

react-structured-filter (unmaintained)

react-structured-filter is a javascript library that provides autocomplete faceted search queries.
This was inspired by visualsearch and structured-filter but redone for React.

It is heavily based on react-typeahead and uses some modified code from react-datepicker.
It was developed to be used with Griddle, but should be usable with fixed-data-table.

It is used by Summit Route internally for analyzing our data.
We needed an interface to provide advanced querying capabilities. Be aware that it might be confusing to your users and queries can be constructed that may not be performant on your dataset.

The demo provided uses static data sent down to the client.
You should poll data from a server and do filtering on a real database.

Demo

Check out the docs and demo

License

BSD License

react-structured-filter's People

Contributors

0xdabbad00 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-structured-filter's Issues

correct dependencies

current package.json is:

  "dependencies": {
    "browserify":"*",
    "envify": "^1.2.1",
    "es6-promise": "*",
    "fuzzy": "^0.1.0",
    "gulp": "*",
    "gulp-browserify": "*",
    "gulp-uglify": "*",
    "gulp-util": "*",
    "gulp-concat": "*",
    "gulp-watch": "*",
    "react": "*",
    "react-async": "^2.0.1",
    "moment": "*",
    "tether": "*",
    "react-onclickoutside": "*",
    "reactify": "git://github.com/andreypopp/reactify.git#v0.16.0",
    "reqwest": "*",
    "griddle-react": "0.2.4",
    "griddle-callback": "0.2.0",
    "react-bootstrap": "*",
    "vinyl-source-stream": "*",
    "watchify": "*"
  },

but imo not all these libs are real dependency but only devDependenci (for example: gulp, gulp-uglify, guld-*, watchify etc.)

Update?

Is there any plan to update this code to React 15? It seems to have a lot of old stuff in there and needs updating.

Error when attempting to import with webpack

15:32:53 client.1 | ERROR in ./~/react-datetime/css/react-datetime.css
15:32:53 client.1 | Module parse failed: /redacted/node_modules/react-datetime/css/react-datetime.css Unexpected token (5:0)

Solved by adding:

config.module.loaders.push(
  {
    test: /\.css$/,
    loader: "style-loader!css-loader"
  }
);

to my webpack config. This is probably a super common set up so maybe worth adding to the README. Happy to do a PR next week.

Year filter wrong granularity?

Hi,
Thanks for doing this, it's really cool! I had seen visualsearch and been meaning to try it for react.rocks.

Date issue:

The IPO column is shown as a year, but the date picker is day level of granularity.

Seems wrong...guess the IPO is really a day, but rounded down to the year? Seems like it'd be more intuitive if the date were displayed.

Date picking is not very user friendly

When we select a date , its not very intuitive that we need to press back on the input box to make the date selection effective.
This is a bad user experience and if we have something like a submit button , for date selection pop over , it would be of great help.

Edit existing individual filter

Once we select a filter and create a couple more of them , its a common use case that we need to go back and edit the previous filter. Its a bad user experience to remove the tag and create it from scratch.
Rather if we can click on the tag and edit them , that would be a better user experience.

Cannot read property 'slice' of undefined

Hi @joshcarr ,

I'm using the minimalist feature of the filter like

<StructuredFilter
    placeholder="Search..."
    options={[
        {category:"Name",type:"text"},
        {category:"Price",type:"number"},
    ]}
/>

and I'm getting the error

Uncaught TypeError: Cannot read property 'slice' of undefined
getStateFromProps 
Tokenizer 
constructComponentWithoutOwner 

Could you please help.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.