https://github.com/kit-data-manager/data-view-web-component
A customizable visualization component for hierarchical information
https://github.com/kit-data-manager/data-view-web-component
web-component
Last synced: 5 months ago
JSON representation
A customizable visualization component for hierarchical information
- Host: GitHub
- URL: https://github.com/kit-data-manager/data-view-web-component
- Owner: kit-data-manager
- License: mit
- Created: 2024-07-31T14:24:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-12-14T01:15:39.000Z (6 months ago)
- Last Synced: 2025-12-15T23:05:30.912Z (6 months ago)
- Topics: web-component
- Language: TypeScript
- Homepage: https://kit-data-manager.github.io/data-view-web-component/
- Size: 3.44 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://stenciljs.com)
[](https://github.com/kit-data-manager/data-view-web-component/actions/workflows/npm-ci.yml)
[](https://www.npmjs.com/package/@kit-data-manager/data-view-web-component)
# Generic Data View Web Component for KIT DM applications
## Development
### How to run with Storybook
Execute both commands in parallel
```bash
npm run build-watch
```
and
```bash
npm run storybook
```
### Only run Stencil without Storybook
```bash
npm start
```
### Publishing
To publish the Web Component, simply run `npm publish` in the root directory. This will automatically run the `prepare` script which builds the component before publishing.
The React Wrapper Library should also always be published at the same time, with the same package version (not for a technical reason, rather to facilitate understanding). The generated files (`react-library/lib/*`) get generated when the `build` script is executed in the root directory, since React is one of the output targets.
- Enter the react-library directory `cd react-library`
- Run `npm publish`. Just like in the root, the `prepare` script will be called and will compile the Typescript.
## Installation
### React App
To use this Web Component in a React App, it is recommended to use the [React Wrapper Library](https://www.npmjs.com/package/data-card-react). This allows for correct Event Propagation
and passing Object & Arrays directly as Props, aswell as allowing Intellisense for the props.
- Run `npm install data-card-react`
- Use as any other React Component
### Script tag
- Put a script tag `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### Node Modules
- Run `npm install data-view-web-component --save`
- Put a script tag `` in the head of your index.html
- OR load the element at the start of the App:
```
import { applyPolyfills, defineCustomElements } from 'data-view-web-component/loader';
applyPolyfills().then(() => {
defineCustomElements();
});
```
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm install data-view-web-component --save`
- Add an import to the npm packages `import data-view-web-component;`
- Then you can use the element anywhere in your template, JSX, html etc
## Usage
### Icons
All Icons from this list can be used:
https://icon-sets.iconify.design/
### Props
[Props & Types](src/components/data-card/readme.md)