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: