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