Dear adminh1,

Thank you for reaching out to us regarding the challenges you are facing with your implementation of data tables, date pickers, modal dialogs, and tab controls. I understand that you are encountering difficulties in binding data to tables, referencing the standard jQuery library in your script tags, and ensuring that sub-menu items remain highlighted and open when selected.

1. To customize the data in Tabulator, you need to update the code in the following file /src/js/tabulator.js. In this file, you can change the columns and other properties from the Tabulator configuration. Then, you need to compile the JS assets using the command yarn run watch.

2. Currently, we are not using jQuery. We have written a built-in mini library called ‘dom.js’ which is used to manipulate the DOM elements and is inspired by jQuery. We wrote this library to keep the final code size small by removing unnecessary functions in jQuery. You can access the code of dom.js at the following path: /node_modules/@left4code/tw-starter/dist/js/dom.js.

However, we can replace this plugin with jQuery if you require the full functionality of jQuery. First, we need to install jQuery using the command ‘yarn add jquery’. Then, access the file at /src/js/bootstrap.js and replace the following line.”

// Load plugins
import helper from "./helper";
import * as Popper from "@popperjs/core";

// Replace this line
// import dom from "@left4code/tw-starter/dist/js/dom";

// To this
import jquery from "jquery";

// Set plugins globally
window.helper = helper;
window.Popper = Popper;

// Replace this line
// window.$ = dom;

// To this
window.$ = jquery;

After that, you can use the functions in jQuery as usual.

3. To activate the active side menu, you need to manually add the class “side-side-menu—active” to the active menu and “side-menu__sub-open” to the active submenu dropdown. You can do this on the backend side. For more details, you can check out the following element structure.

https://i.imgur.com/3dWuLZj.png

Please use incognito if you are using chrome or use another browser if you can’t open the above link.

We hope this solution will be helpful in resolving your issue. If you need further assistance, please don’t hesitate to reach out to us again.

Best regards, Left4code Team

Hello!

Thanks for reaching out. To change the format of your date picker, you can follow these steps:

1. Open the file “src/js/datepicker.js”.
2. On line 15, you can change the format to one of the following options: “DD-MM-YYYY”, “MM-YYYY”, “YYYY”, or “DD”.
3. The format option should be set to the desired format you would like to use.

Let me know if you have any other questions or if there’s anything else I can assist with.

Hi there,

Thank you for reaching out to us,

The latest updates of the package @left4code/tw-starter v3+ were released for Tailwind 3+, in the latest version, the Midone package doesn’t use SASS anymore and only uses regular CSS because of a compatibility issue with Tailwind.

You can see the code in ”/node_modules/@left4code/tw-starter/dist/*” for more details.

Hi,

Thank you for reaching out to us,

The short answer is, yes, it’s possible. We only need to add the dark mode class to the root HTML element.

Is it possible to add this item in future updates?

Hi there,

Sorry for the late response,

Unfortunately, at this time our team doesn’t have any integration experience with sveltekit or the boilerplate that works with svelte.

Please don’t hesitate to contact us if you have any other questions.

Note : For each Api call using the middleware auth:sanctum, we are redirected to the home page

Hi there,

Sorry for the late reply,

Actually, we have never used `Datatable`, and this is not included in the Item Support because the use of plugins other than what we provide is the responsibility of each buyer.

But maybe you can try the following steps.

To use `Datatables` you need to install the package first.

yarn add jquery
yarn add datatables.net
yarn add datatables.net-dt

Create new file ”/src/js/datatable.js”.

var jquery       = require( 'jquery' );
var dt      = require( 'datatables.net' )( window, jquery);

let table = new DataTable('#example', {
    // options
});

Last step, import the last created file into app.js.

/*
 |--------------------------------------------------------------------------
 | Custom Components
 |--------------------------------------------------------------------------
 |
 | Import JS custom components.
 |
 */
import "./maps";
import "./chat";
import "./show-modal";
import "./show-slide-over";
import "./show-dropdown";
import "./search";
import "./copy-code";
import "./show-code";
import "./side-menu";
import "./mobile-menu";
import "./side-menu-tooltip";
import "./dark-mode-switcher";

// Import last created datatable file
import "./datatable";

Run `yarn run watch` to recompile the assets.

Hope this helps.

Hi,

Thank you for reaching out to us,

The XD design file is currently only available for Rubick version, the first version of Midone. You can check it inside the Rubick version directory.

Hi,

Thank you for reaching out to us,

Unfortunately, We currently do not provide customization service.

Hi,

Thank you for reaching out to us,

Unfortunately, we don’t use bootstrap, it’s a Tailwind template.

Hi,

Sorry for the late reply,

Just had time to make a sample project. We have sent the file, please check your email.

Hi there,

Thank you for reaching out to us,

The XD design files are currently only available for the Rubick version.
https://prnt.sc/17tcd3a
Best regards, Left4code Team

Hi there,

Unfortunately, for now we will only be using the lucide icon. Maybe you can use the following icon.

https://lucide.dev/?search=barcode

Glad it worked, let me know if you need any other help..

Hi, after adding jQuery, the modal stopped working. I believe the problem is due to removing the dom element when using jQuery.

Error is:

Uncaught TypeError: Cannot read properties of undefined (reading ‘dispatchEvent’)

This line: ``` import dom from ”@left4code/tw-starter/dist/js/dom”; window.$ = dom; ```

was replaced with:

``` import jQuery from “jquery”; window.$ = window.jQuery = jQuery ```

Is there a solution to fix element reading dom instead of jQuery?

Hi,

Thank you for your reply,

Can you send step-by-step to reproduce the issue?

The modal js code doesn’t rely on jquery, so replacing the `dom` package shouldn’t affect the built-in libraries.

We just checked the current release with jquery and accessed the modal page without any issues. https://i.imgur.com/oYrnkrs.png

Hi,

Sorry for the late reply,

Yes, we can help you with this but you have to buy the Laravel version first and apply for a refund for the html version at this link.

https://themeforest.net/refund_requests/new

We will accept your refund request as soon as we check your purchase history, thank you.