-
-
Notifications
You must be signed in to change notification settings - Fork 235
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
jQuery wrapper #27
Comments
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 main.jsconst 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", "john@example.com", "(353) 01 222 3333"],
["Mark", "mark@gmail.com", "(01) 22 888 4444"],
["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
["Afshin", "afshin@mail.com", "(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);
} |
@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 |
I’ll check it out.
That makes sense. I didn’t dig into the config that much; |
I started to use Anyways, I have a feature branch for the jQuery stuff. Maybe it can give people ideas?
I have 4 working examples in there too:
|
@rmkane +1 for using Rollup instead. That looks amazing! I'd suggest fixing the build took and merging that PR. |
$(element).gridjs({...});
The text was updated successfully, but these errors were encountered: