diff --git a/README.md b/README.md index 7faa3eb..389dc8e 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,80 @@ # Explore Tables -React component for rendering pivot tables. Main purpose of the tables is data analysis and visualization. +A React component library for building interactive pivot tables focused on data analysis and visualization. Perfect for creating in-house analytics dashboards and ad-hoc data exploration pages. -Can be used for building in-house ad-hoc pages for data analysis. +## Features -## Usage +- Pivot table rendering +- Support for multiple themes +- Override table elements for customizations + + +## Learn More + +📚 Visit our [homepage](https://bozerkins.github.io/explore-tables/#/) for more examples and detailed documentation. + +## Quick Start + +Install the package: +```shell +npm install explore-tables +``` + +Import and use: ```tsx import { PivotTable } from "explore-tables" -// default theme import 'explore-tables/themes/default.css'; -export default () => { - // metadata of our dataset - // used to display proper titles and navigate the rows - const fields = [ - { id: 'species', name: 'Species' }, - { id: 'habitat_type', name: 'Habitat Type' }, - { id: 'total', name: 'Number of Animals' }, - ]; - // actual data that is morphed into a pivot - // note that the dataset should be unique between dimensions + pivots - // in case when duplicate records are found, the pivot table displays the last value - const rows = [ - {species: 'African Lion', habitat_type: 'Savanna', total: 20000}, - {species: 'African Elephant', habitat_type: 'Savanna', total: 415000}, - {species: 'Zebra', habitat_type: 'Savanna', total: 150000}, - {species: 'African Lion', habitat_type: 'Forest', total: 5000}, - {species: 'African Elephant', habitat_type: 'Forest', total: 95000}, - {species: 'Zebra', habitat_type: 'Forest', total: 25000}, - {species: 'African Lion', habitat_type: 'Desert', total: 2000}, - {species: 'African Elephant', habitat_type: 'Desert', total: 1000}, - {species: 'Zebra', habitat_type: 'Desert', total: 5000}, - {species: 'African Lion', habitat_type: 'Mountain', total: 500}, - {species: 'African Elephant', habitat_type: 'Mountain', total: 200}, - {species: 'Zebra', habitat_type: 'Mountain', total: 3000}, - {species: 'African Lion', habitat_type: 'Wetland', total: 1500}, - {species: 'African Elephant', habitat_type: 'Wetland', total: 25000}, - {species: 'Zebra', habitat_type: 'Wetland', total: 8000} +const SimpleTable = () => { + // The data that is morphed into a pivot during rendering. + // Note that the dataset should be unique between dimensions + pivots. + // In case when duplicate records are found, the pivot table displays the last value. + const data = [ + { category: 'Furniture', product: 'Chair', region: 'North', sales: 100 }, + { category: 'Furniture', product: 'Table', region: 'North', sales: 250 }, + { category: 'Electronics', product: 'Phone', region: 'South', sales: 300 }, + { category: 'Electronics', product: 'Laptop', region: 'South', sales: 1200 }, ]; - // render the data - // note that pivot tables do not aggregate the data, but merely display it - return ( - - ); + + // Render the data. + // Note that pivot tables do not aggregate the data, but merely display it + return } ``` -Rendering the table would result into +The above example will render a pivot table like this: ![pivot tables example](example.png "Pivot Table") +## Important Notes + +- Dataset records should be unique between dimensions and pivots +- In case of duplicate records, the pivot table displays the last value +- The pivot table displays data as-is without aggregation + ## Development +To run the development server: ```shell -# start development demo server npm run dev ``` -## Contributions +## Contributing -Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. +We welcome contributions! For major changes, please open an issue first to discuss your proposed changes. -## Authors & Contacts +## Authors & Contact * Bogdans diff --git a/example.png b/example.png index 0dccbea..c9ef3b2 100644 Binary files a/example.png and b/example.png differ