reva-toolkit v1.0.33

Your Package Name

🌟 Introduction

Reva-Toolkit is a collection of few custom UI components. It helps you implement custom UI components in your project.

🚀 Installation

To install the package, run:

npm install reva-toolkit
# or
yarn add reva-toolkit
# or
pnpm add reva-toolkit

📖 Usage

Import the package and use it in your project:

import 'reva-toolkit/dist/index.css';
import { Dashboard } from "reva-toolkit";

const App = () => {
  return <Dashboard/>;
};

export default App;

import 'reva-toolkit/dist/index.css';
import { Table } from "reva-toolkit";

const testingWithOtherProps = {
    "id": "6306f734-6a34-477b-bf17-2ccc9cb53878",
    "title": "Sample Table",
    "data": [
        {
            "id": 1,
            "name": "Sample 1",
            "amount": "$100.00",
            "percentage": "75%",
            "date": "2024-01-01",
            "number": -42
        },
        {
            "id": 2,
            "name": "Sample 2",
            "amount": "$200.00",
            "percentage": "85%",
            "date": "2024-01-02",
            "number": 123
        },
        {
            "id": 3,
            "name": "Sample 3",
            "amount": "$300.00",
            "percentage": "{\"value\":\"95%\",\"backgroundColor\":\"#ccffcc\"}",
            "date": "2024-01-03",
            "number": 789
        }
    ],
    "columns": {
        "id": {
            "originalName": "id",
            "displayName": "id",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "number",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "name": {
            "originalName": "name",
            "displayName": "name",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "date",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "amount": {
            "originalName": "amount",
            "displayName": "amount",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "currency",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "percentage": {
            "originalName": "percentage",
            "displayName": "percentage",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "percentage",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "date": {
            "originalName": "date",
            "displayName": "date",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "date",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "number": {
            "originalName": "number",
            "displayName": "number",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "number",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        }
    },
    "columnOrder": [
        "id",
        "name",
        "amount",
        "percentage",
        "date",
        "number"
    ],
    "filters": [],
    "sorting": {
        "column": "",
        "direction": null
    },
    "colorRules": [],
    "pagination": {
        "rowsPerPage": 10,
        "currentPage": 1
    },
    "rows": {
        "height": 40,
        "editableRows": [],
        "selectedRows": []
    },
    "appearance": {
        "showBorders": true,
        "alternateRowColors": true,
        "headerBackgroundColor": "#f3f4f6",
        "headerTextColor": "#111827",
        "rowBackgroundColor": "#ffffff",
        "rowBackgroundColorAlternate": "#f9fafb",
        "rowTextColor": "#374151",
        "fontSize": "14px",
        "fontFamily": "system-ui, -apple-system, sans-serif"
    }
}

const App = () => {
  return <Table columns={testingWithOtherProps.columnOrder} data={testingWithOtherProps.data} title={testingWithOtherProps.title} showPagination={testingWithOtherProps.showPagination} NotInDashboard={testingWithOtherProps.NotInDashboard}/>
;
};

export default App;

⚙️ Props

🎯 Example

Here’s a working example:

import { Table } from "reva-toolkit"


function App() {

  const testingWithOtherProps = {
    "id": "6306f734-6a34-477b-bf17-2ccc9cb53878",
    "title": "Sample Table",
    "data": [
        {
            "id": 1,
            "name": "Sample 1",
            "amount": "$100.00",
            "percentage": "75%",
            "date": "2024-01-01",
            "number": -42
        },
        {
            "id": 2,
            "name": "Sample 2",
            "amount": "$200.00",
            "percentage": "85%",
            "date": "2024-01-02",
            "number": 123
        },
        {
            "id": 3,
            "name": "Sample 3",
            "amount": "$300.00",
            "percentage": "{\"value\":\"95%\",\"backgroundColor\":\"#ccffcc\"}",
            "date": "2024-01-03",
            "number": 789
        }
    ],
    "columns": {
        "id": {
            "originalName": "id",
            "displayName": "id",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "number",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "name": {
            "originalName": "name",
            "displayName": "name",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "date",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "amount": {
            "originalName": "amount",
            "displayName": "amount",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "currency",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "percentage": {
            "originalName": "percentage",
            "displayName": "percentage",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "percentage",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "date": {
            "originalName": "date",
            "displayName": "date",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "date",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        },
        "number": {
            "originalName": "number",
            "displayName": "number",
            "visible": true,
            "width": 150,
            "alignment": "left",
            "format": {
                "type": "number",
                "options": {}
            },
            "aggregations": {
                "sum": false,
                "avg": false,
                "min": false,
                "max": false,
                "count": false
            }
        }
    },
    "columnOrder": [
        "id",
        "name",
        "amount",
        "percentage",
        "date",
        "number"
    ],
    "filters": [],
    "sorting": {
        "column": "",
        "direction": null
    },
    "colorRules": [],
    "pagination": {
        "rowsPerPage": 10,
        "currentPage": 1
    },
    "rows": {
        "height": 40,
        "editableRows": [],
        "selectedRows": []
    },
    "appearance": {
        "showBorders": true,
        "alternateRowColors": true,
        "headerBackgroundColor": "#f3f4f6",
        "headerTextColor": "#111827",
        "rowBackgroundColor": "#ffffff",
        "rowBackgroundColorAlternate": "#f9fafb",
        "rowTextColor": "#374151",
        "fontSize": "14px",
        "fontFamily": "system-ui, -apple-system, sans-serif"
    }
}

  const sample = {
    columns: [
     "key",
     "name",
      "age",
      "address"
    ],
    data: [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
    ],
    title:"Sample Table",
    showPagination:true,
    NotInDashboard:true,
  }

  return (
    <>
      <Table columns={testingWithOtherProps.columnOrder} data={testingWithOtherProps.data} title={testingWithOtherProps.title} showPagination={sample.showPagination} NotInDashboard={sample.NotInDashboard}/>
    </>
  )
}

export default App