8ea5eec09e
* .vscode settings updates * update yarn * remove eslint * formatting, linting * lint fixes * build updates * get storybook building * add path filter to JS ci * organize imports * formatting update * update biome.json * semver * packages -> javascript |
||
|---|---|---|
| .. | ||
| docs | ||
| src | ||
| .npmignore | ||
| README.md | ||
| package.json | ||
| tsconfig.json | ||
README.md
@essex/thematic-lineup
ThematicLineup
This component uses the standard LineUp.js table, and does:
- injection of Thematic
- cleans it up a little bit
- adds a custom filtering mechanism
ThematicLineupStory displays a LineUp instance, while also applying default thematic styles and data colors.
Use it for a React-style JSX wrapper around LineUp that has more potential flexibility than the very configuration limited version exposed by the LineUp project.
This allows arbitrary column configurations via jsx, and a set of global filters if desired.
Light Theme
Dark Theme
Extending webpack config example
You may need to extend webpack config to get lineup component to work. If you are using the @essex/scripts build system, an example of this is:
const { configure } = require('@essex/webpack-config')
const base = configure({ pnp: true }) // if using pnp
const lineupRules = [
{
test: /\.svg(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader',
options: {
limit: 10000, //inline <= 10kb
mimetype: 'image/svg+xml',
},
},
{
test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
]
base.module.rules = [...base.module.rules, ...lineupRules]
module.exports = base
License
Licensed under the MIT License.