{"id":19791656,"url":"https://github.com/lemonadejs/data-grid","last_synced_at":"2025-02-28T09:37:42.143Z","repository":{"id":160652655,"uuid":"635453553","full_name":"lemonadejs/data-grid","owner":"lemonadejs","description":"Reactive JavaScript Data Grid","archived":false,"fork":false,"pushed_at":"2024-04-05T17:50:36.000Z","size":243,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-11T04:21:36.780Z","etag":null,"topics":["data-grid","data-grids","data-table","data-tables","javascript-data-grid","reactive-data-grid"],"latest_commit_sha":null,"homepage":"https://lemonadejs.net/components/data-grid","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lemonadejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-02T18:20:14.000Z","updated_at":"2023-06-15T17:44:09.000Z","dependencies_parsed_at":"2025-01-11T04:21:36.302Z","dependency_job_id":"4c0bcf76-bc9d-47f2-97a8-1a34fe3a4b24","html_url":"https://github.com/lemonadejs/data-grid","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemonadejs%2Fdata-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemonadejs%2Fdata-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemonadejs%2Fdata-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemonadejs%2Fdata-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lemonadejs","download_url":"https://codeload.github.com/lemonadejs/data-grid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241131925,"owners_count":19915035,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-grid","data-grids","data-table","data-tables","javascript-data-grid","reactive-data-grid"],"created_at":"2024-11-12T07:04:17.058Z","updated_at":"2025-02-28T09:37:42.121Z","avatar_url":"https://github.com/lemonadejs.png","language":"JavaScript","readme":"# Javascript Data Grid\n\n[Official website and documentation is here](https://lemonadejs.net/components/data-grid)\n\nCompatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.\n\nThe JavaScript Data Grid is a lightweight library that effortlessly enables you to embed lightweight data grids into your applications. Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS, and Angular, this versatile component allows you to conveniently load JSON data, define columns, and seamlessly render the grid within your HTML. Enjoy robust features like search, pagination, and editable rows, empowering you to build interactive and feature-rich data grid experiences.\n\n## Features\n\n-   Lightweight: The lemonade data grid is only about 4 KBytes;\n-   Customizable: You can define columns and user-defined actions to suit your use case;\n-   Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;\n-   Integration: It can be used as a standalone library or integrated with any modern framework;\n\n## Getting Started\n\nYou can install using NPM or using directly from a CDN.\n\n### npm Installation\n\nTo install it in your project using npm, run the following command:\n\n```bash\n$ npm install @lemonadejs/datagrid\n```\n\n### CDN\n\nTo use data grid via a CDN, include the following script tags in your HTML file:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/@lemonadejs/datagrid/dist/index.min.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\nThere are two ways to instantiate a Data Grid, Programmatically or Dynamically\n\n#### Programmatically\n\nCreate an instance of the data grid by providing the DOM element, and the **_options_** object.\n\n```html\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    const root = document.getElementById('root')\n    Datagrid(root, {\n        data: [\n            { id: 1, person: 'Maria', age: 28 },\n            { id: 2, person: 'Carlos', age: 33 }\n        ],\n        columns: [\n            { name: 'person', title: 'Name' },\n            { name: 'age', title: 'Age' }\n        ]\n    })\n\u003c/script\u003e\n```\n\n#### Dynamically with LemonadeJS\n\nThe LemonadeJS data grid is invoked within the template, with the options being passed as properties.\n\n```javascript\nimport Datagrid from '@lemonadejs/datagrid'\n\nexport default function Component() {\n    let self = this;\n\n    self.data = [\n        { id: 1, person: 'Maria', age: 28 },\n        { id: 2, person: 'Carlos', age: 33 }\n    ]\n\n    self.columns = [\n        { name: 'person', title: 'Name' },\n        { name: 'age', title: 'Age' }\n    ]\n\n    return `\u003cDatagrid :data=\"self.data\" :columns=\"self.columns\" /\u003e`\n}\n```\n\n### Configuration\n\nAdditionally, you have the option of incorporating **_pagination_** and **_search_** functionalities by including them in the options. For example:\n\n```javascript\nDatagrid(root, {\n    data: [\n        { id: 1, person: 'Maria', age: 28 },\n        { id: 2, person: 'Carlos', age: 33 }\n    ],\n    columns: [\n        { name: 'person', title: 'Name' },\n        { name: 'age', title: 'Age' }\n    ],\n    pagination: 5, // Each page will contain this quantity of items.\n    search: true\n})\n```\n\n### Examples\n\nHere are a few examples of DataGridLM in action:\n\n-   [Basic Data Grid Example](https://lemonadejs.net/components/data-grid#example-1)\n-   [Example with Large Data Sets](https://lemonadejs.net/components/data-grid#example-2)\n-   [Example with Data Addition and Deletion](https://lemonadejs.net/components/data-grid#example-3)\n\n\u003cbr\u003e\n\n## React wrapper\n\nUtilize the Data Grid React component to integrate the grid into your React applications seamlessly. This wrapper simplifies the process, enabling you to display, manipulate, and interact with large datasets using React's declarative and component-based approach. Enjoy the convenience and power of the Data Grid, making data management a breeze within your React projects.\n\n```npm install @lemonadejs/react-data-grid```\n\n```\nimport React, { useRef, useState } from \"react\";\nimport Datagrid from '@lemonadejs/react-data-grid';\n \ndefault export function App() {\n    const datagrid = useRef();\n \n    const [columns, setColumns] = useState([\n        { name: 'name', title: 'Product', width: '200px', align: 'left' },\n        { name: 'price', title: 'Price', width: '100px', align: 'center' },\n        { name: 'description', title: 'Description', width: '300px', align: 'left' },\n    ])\n \n    const [data, setData] = useState([\n        {\n            id: 1,\n            name: \"T-Shirt\",\n            price: 19.99,\n            description: \"This is a high-quality cotton t-shirt in a variety of colors and sizes.\",\n        },\n        {\n            id: 2,\n            name: \"Jeans\",\n            price: 49.99,\n            description: \"These are premium denim jeans in a slim-fit style.\",\n        },\n        {\n            id: 3,\n            name: \"Sneakers\",\n            price: 79.99,\n            description: \"These are comfortable and stylish sneakers in a range of colors.\",\n        },\n        {\n            id: 4,\n            name: \"Backpack\",\n            price: 39.99,\n            description: \"This is a durable and spacious backpack with multiple compartments.\",\n        },\n    ])\n \n    // This function assigns a value to the second cell of the column 'name'.\n    const setItemValue = function () {\n        datagrid.current.setValue('name', 1, 'Blue Jeans')\n    }\n \n    // This function update the current page in pagination to 2.\n    const goToPage2 = function () {\n        datagrid.current.page = 1;\n    }\n \n    return (\u003c\u003e\n        \u003cDatagrid\n            ref={datagrid}\n            data={data}\n            columns={columns}\n            pagination={2}\n            onupdate={() =\u003e console.log('Datagrid was updated')}\n            onchangepage={() =\u003e console.log('Datagrid page changed')}\n        /\u003e\n        \u003cbutton onclick={() =\u003e goToPage2()}\u003eGo To Page 2\u003c/button\u003e\n        \u003cbutton onclick={() =\u003e setItemValue()}\u003eChange Value in 'Name' Second Line\u003c/button\u003e\n    \u003c/\u003e);\n}\n```\n\n## Development\n\nYou can clone the project on github.\n\ngit clone https://github.com/lemonadejs/data-grid.git\n\n### Running the project\n\nTo run the project in development mode, use the following commands:\n\n```bash\n$ npm i\n$ npm start\n```\n\nThis will start a web-server with a DataGrid page as playground.\n\n### Running Tests\n\nAfter installing the packages run:\n\n```bash\n$ npm run test\n```\n\nTo see more details in a browser:\n\n```bash\n$ npm run test:browser\n```\n\nTo have more information about test coverage:\n\n```bash\n$ npm run test:coverage\n```\n\n## Contributing\n\nThe LemonadeJS data grid is an open-source project, and contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub. To contribute code, please fork the repository and submit a pull request.\n\nEnsure that you run the formatting plugins to maintain consistent code patterns. You can use the following command to do that:\n\n```bash\n$ npm run format\n```\n\n## License\n\nThe LemonadeJS data grid is released under the MIT.\n\n## Other Tools\n\n-   [jSuites](https://jsuites.net)\n-   [Jspreadsheet](https://jspreadsheet.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemonadejs%2Fdata-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemonadejs%2Fdata-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemonadejs%2Fdata-grid/lists"}