filtex-ui

Filtex

The Filtex library is a versatile tool designed to filtering data across various sources like PostgreSQL, MongoDB, and in-memory datasets. This library empowers developers to create complex queries using both JSON and text formats, generating expressions compatible with the target data sources.

It allows to configure your dataset with some options and provides a metadata model to be able to use in UI components and then it accepts the query that is generated by UI and generates query for data sources like Postgres, Mongo etc.

Check the packages for other platforms.

• filtex-go
• filtex-net
• filtex-js

Setup

npm install filtex-ui

Usage

Configure

const [themes, setThemes] = useState([]);
const [theme, setTheme] = useState('dark');
const [modes, setModes] = useState(['text', 'tree']);
const [mode, setMode] = useState('text');
const [value, setValue] = useState(null);
const [metadata, setMetadata] = useState(null);
const [data, setData] = useState([]);

// Fetch metadata model from backend
useEffect(() => {
    const data = await fetch('/metadata');
    setMetadata(data);
}, []);

// Send query to backend
const handleSubmit = (value) => {
    const data = await fetch('/filter?query=' + value.text);
    setData(data);
};

Render

import { Filtex } from 'filtex-ui';

<Filtex
    metadata={metadata}
    themes={themes}
    theme={theme}
    modes={modes}
    mode={mode}
    hideMenuButton={false}
    hideSubmitButton={false}
    hideResetButton={false}
    hideSwitchButton={false}
    autoSubmitEnabled={true}
    value={value}
    onSubmit={handleSubmit} />

{JSON.stringify(data, null, 4)}

License

This library is licensed under the MIT License.