update readme

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 (
-      <PivotTable
-          rows={rows} 
-          fields={fields}
-          measures={["total"]} // fields to display into measures
-          dimensions={["species"]} // fields to display into dimensions
-          pivots={["habitat_type"]} // fields to display into pivots
-      />
-    );
+
+    // Render the data.
+    // Note that pivot tables do not aggregate the data, but merely display it
+    return <PivotTable 
+        rows={data}
+        fields={[
+            { id: 'category', name: 'Category' },
+            { id: 'product', name: 'Product' },
+            { id: 'region', name: 'Region' },
+            { id: 'sales', name: 'Sales' }
+        ]}
+        dimensions={['category', 'product']}
+        measures={['sales']}
+        pivots={['region']}
+    />
 }
 ```
 
-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 <[email protected]>