Comments (5)
rmkane
commented on May 23, 2024
1
I am not sure how you could incorporate it into your current build, but I assume you would just create a static jQuery wrapper that loads after gridjs.production.min.js.
main.js
const main = async () => {
$('#wrapper').gridjs({
columns: ["Name", "Email", "Phone Number"],
data: await fetchJsonData('data.json'),
search: true,
sort: true
});
};
/**
* @description Returns a JSON promise
* @param {string} filename
* @returns {Promise<T>}
*/
const fetchJsonData = async (filename) => {
return fetch(filename)
.then(response => response.json());
};
main().then(res => null);jquery.gridjs.js
/*
* filename: jquery.gridjs.js
*/
(($) => {
/**
* A jQuery wrapper for gridjs
* @param {object} userConfig
* @param {array|function} [userConfig.data]
* @param {object} [userConfig.header]
* @param {HTMLElement} [userConfig.from]
* @param {object} userConfig.storage
* @param {object} userConfig.pipeline
* @param {boolean} userConfig.autoWidth
* @param {string} userConfig.width
* @param {object} [userConfig.server]
* @param {string} userConfig.server.url
* @param {string} [userConfig.then]
* @param {array} [userConfig.opts]
* @param {array} [userConfig.columns]
* @param {object|boolean} [userConfig.search]
* @param {string} [userConfig.search.keyword]
* @param {boolean} [userConfig.search.enabled]
* @param {string} [userConfig.search.placeholder]
* @param {object|boolean} userConfig.pagination
* @param {number} [userConfig.pagination.limit]
* @param {number} [userConfig.pagination.page]
* @param {boolean} [userConfig.pagination.enabled]
* @param {boolean} [userConfig.pagination.summary]
* @param {boolean} [userConfig.pagination.nextButton]
* @param {boolean} [userConfig.pagination.prevButton]
* @param {number} [userConfig.pagination.buttonsCount]
* @param {boolean} [userConfig.sort]
* @returns {jQuery}
*/
$.fn.gridjs = function (userConfig) {
new gridjs.Grid(userConfig).render(this.get(0));
return this;
};
})(jQuery);data.json
[
["John", "[email protected]", "(353) 01 222 3333"],
["Mark", "[email protected]", "(01) 22 888 4444"],
["Eoin", "[email protected]", "0097 22 654 00033"],
["Sarah", "[email protected]", "+322 876 1233"],
["Afshin", "[email protected]", "(353) 22 87 8356"]
]index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A jQuery wrapper for gridjs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery.gridjs.js"type="text/javascript"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-center">jQuery Wrapper</h1>
<div id="wrapper"></div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>style.css
:root {
--background-color: #222;
--foreground-color: #FFF;
}
body {
padding: 1em;
background: var(--background-color);
color: var(--foreground-color);
}from gridjs.
rmkane
commented on May 23, 2024
1
@rmkane that's it I guess, yeah! I just created this repo https://github.com/grid-js/gridjs-jquery if you like to contribute and add that to the repo.
I’ll check it out.
Also, it's nice to pass the element in
$(element)to thefromproperty if it's a HTML table. see https://gridjs.io/docs/config#from
That makes sense. I didn’t dig into the config that much;
just brushed the surface.
from gridjs.
afshinm
commented on May 23, 2024
@rmkane that's it I guess, yeah! I just created this repo https://github.com/grid-js/gridjs-jquery if you like to contribute and add that to the repo.
Also, it's nice to pass the element in $(element) to the from property if it's a HTML table. see https://gridjs.io/docs/config#from
from gridjs.
rmkane
commented on May 23, 2024
I started to use webpack, but I do not like how it adds a bunch of extra stuff to the distribution/bundle files. Maybe I misconfigured it. I'm probably gonna switch to rollup.
Anyways, I have a feature branch for the jQuery stuff. Maybe it can give people ideas?
https://github.com/rmkane/gridjs-jquery/tree/feature/skeleton
I have 4 working examples in there too:
- Render a gridjs table from loaded data
- Render a gridjs table from an existing table with a wrapper
- Render a gridjs table from an existing table without a wrapper
- Render a gridjs table in-place of an existing one
from gridjs.
afshinm
commented on May 23, 2024
@rmkane +1 for using Rollup instead.
That looks amazing! I'd suggest fixing the build took and merging that PR.
from gridjs.
Related Issues (20)
- Plugin folder fails to build when building from git. HOT 1
- Request to mark this Library Unmaintained if it is not being updated anymore HOT 3
- Pagination's selected num forced change to `1` with sort
- Table background opacity HOT 1
- Compatibility issue? HOT 1
- Being able to resize a column below it's minimum width HOT 1
- IDs are not unique - Violation of SIA-R3 HOT 1
- wide table option error HOT 1
- Server-side search no longer calls to search function HOT 2
- Pagination doesn't reset properly when using server-side search, order & pagination and resetPageOnUpdate=true HOT 1
- Callback on text overflow to customize cell content
- Improve German translations HOT 6
- Empty translated fields fallback to default language.
- Add hint about multiple buttons to Docs/Examples/Customizing/Row buttons
- Error Cannot find module '/src/i18n/language' or its corresponding type declarations.
- Maximum call stack size exceeded error when search is enabled and columns use gridjs.html for formating HOT 3
- Sorting with Undefined Values
- Svelte example with select single row
- Fix events documentation
- Selection plugin not working after update HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridjs.