How to adjust the "skipNatural" boolean in AngularJS Smart-Table without altering the smart-table.js script

Looking to customize the "skipNatural" boolean in the smart-table.js file, but concerned about it being overwritten when using Bower for updates. The current setting in the Smart-Table file is as follows:

ng.module('smart-table')
  .constant('stConfig', {
    pagination: {
      template: 'template/smart-table/pagination.html',
      itemsByPage: 10,
      displayedPages: 5
    },
    search: {
      delay: 400, // ms
      inputEvent: 'input'
    },
    select: {
      mode: 'single',
      selectedClass: 'st-selected'
    },
    sort: {
      ascentClass: 'st-sort-ascent',
      descentClass: 'st-sort-descent',
      skipNatural: false,
      delay:300
    },
    pipe: {
      delay: 100 //ms
    }
  });

Exploring options to modify the boolean by extending the Smart-Table constant or utilizing a Decorator. Currently loading smart-table.min.js and other files via ocLazyLoad.

Managing multiple tables on the site and seeking a way to toggle the Boolean globally instead of setting individually on each table header to avoid redundancy.

Appreciate any insights or suggestions! Thank you!

javascriptangularjssmart-table

Answer №1

In case you missed it, the information below was extracted from the official documentation (specifically in Sort-data).

If you want to skip the "natural order" state, simply include st-skip-natural="true" as an attribute of your th element.

To implement this feature, just add the attribute to your st-sort like this:

<th st-sort="birthDate" st-skip-natural="true">birth date</th>

Note:

Referring to a recent GitHub Issue, the author has made skip-natural globally configurable. You can modify Smart Table's global properties within your application's .config section as shown below, without altering any source files:

angular.module('myModule', []).config(function(stConfig) {
  stConfig.sort.skipNatural = true;
});

This topic is covered under the Global configuration section in the documentation. Additionally, there is a provided list of defaults.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HMR: The webpack-hot-middleware is not refreshing my webpage

My Vue application, titled hello-world, is utilizing webpack-dev-middleware and webpack-hot-middleware. When running the application, it shows that it's connected in the console. However, after making changes to my main.js file, the following message ...

javascriptnode.jswebpackvue.jswebpack-dev-server

Determine your age by manually inputting your date of birth

Utilizing Ajax Calendar, I have successfully implemented a feature to calculate age based on the date selected in one textbox and display it in another. However, I am facing two challenges. First Issue:- I want the Age Textbox to be disabled so users cann ...

javascriptjqueryajax

Convert HTML form input into a JSON file for safekeeping

<div class="email"> <section class="subscribe"> <div class="subscribe-pitch"> </div> <form action="#" method="post" class="subscribe-form" id="emails_form"> <input type="email" class="subscribe-input" placeholder="Enter ema ...

javascriptjqueryhtmlcssjson

Using $route to obtain URL parameters

I am faced with the challenge of passing the last parameter from the following URL to a $http.get request in my Angular application. http://myurl.dev/users/32 However, I am struggling to figure out how to pass the 32 as the id. Here is what I have tried ...

javascriptangularjs

(Novice) The Angular approach to handling on-scroll events

I have successfully created a flowy menu using jQuery, which can be viewed here: http://jsfiddle.net/krongbongtjong/5LeJh/ It was quite easy to implement, but now I am interested in achieving the same result using Angular. However, I am unsure of the appro ...

angularjs

progressive selection modifying designs

Stumbled upon a demo at angularjs: cascade dropdown - see it here <link href="http://jsfiddle.net/6eCZC/1/">demo</link> Does anyone know how to incorporate html-templates based on the selection? ...

angularjscascadingdropdown

Tips for integrating the AJAX response into a Sumo Select dropdown menu

I am currently using Sumoselect for my dropdowns, which can be found at . The dropdowns on my page are named as countries, state, and cities. The countries are shown in the dropdown, and based on the country selected, the corresponding state name should a ...

javascriptjqueryajaxcodeigniter-3sumoselect.js

Tips for using jQuery to adjust HTML attributes based on conditions

I'm still trying to figure out how to assign a different class attribute to an element based on another element's dynamic numberical attribute. Here is the HTML & PHP code I am working with: <?php for($i=1;$i<=$total;$i++){ ?> <a hr ...

javascriptphpjqueryhtmlcss

Ways to integrate a security protocol with a graphql resolver

I'm currently diving into the world of graphql and I'm facing a challenge with incorporating an authentication/authorization system into my project. I stumbled upon an example on Medium, but I'm struggling to grasp how a guard connects with ...

javascriptnode.jsreactjsexpressgraphql

Can we access local storage within the middleware of an SSR Nuxt application?

My Nuxt app includes this middleware function: middleware(context) { const token = context.route.query.token; if (!token) { const result = await context.$api.campaignNewShare.createNewShare(); context.redirect({'name': &a ...

javascriptvue.jsnuxt.jsmiddleware

Using a function as an argument to handle the onClick event

I have a function that generates a React.ReactElement object. I need to provide this function with another function that will be triggered by an onClick event on a button. This is how I call the main function: this._createInjurySection1Drawer([{innerDra ...

javascriptreactjstypescript

what version of Node.js is required for Ionic V1.4.3

I prefer using Ionic V1.X for its compatibility with AngularJS that supports .js, compared to Angular with .ts support. However, when I attempt to check my Ionic version using "ionic -v," the output shows: ReferenceError: primordials is not defined at Mo ...

node.jsangularjscordovaionic-framework

The server is unable to process your request to /graphql

I've encountered an issue while setting up the GraphiQL API. I keep receiving the error message "Cannot POST /graphql" on both the screen and network tab of the console. Despite having similar boilerplate code functioning in another project, I'm ...

javascriptexpressgraphql

What causes my `` to function intermittently?

I've been experimenting with adding attributes and styling to elements. Sometimes my code works perfectly fine, while other times it doesn't produce the desired output. Here's an example of when it works: $('.card-text') .text( ...

javascriptjqueryhtmlcsstwitter-bootstrap

Angular application not displaying refreshed data after fetching information from the server

I've developed a report generator in AngularJS that functions well without using the jQuery datepicker. However, when I implement the jQuery datepicker, the data retrieved from the server is accurate, but the front-end doesn't reflect the changes ...

jqueryangularjsdatepickerjquery-ui-datepicker

Retrieving a function from a JavaScript file located in a publicly accessible directory

Having trouble accessing a function from the JS file scripts.js within the public folder where my CSS file is also located. Despite following various tutorials like this, I keep encountering the error message Error: Cannot find module './scripts.js&ap ...

javascriptnode.jsexpress

Modify the state from a listener that is enclosed in the useEffect function

Within my hook called useQueryEvents, I have a setup that involves fetching all past transactions for a user and listening to the network for incoming/outgoing transactions. These transactions are then passed into a function called addActionToActivity, whi ...

javascriptreactjsreact-nativelistener

What is preventing unary addition from functioning in Angular?

Why isn't the += unary operator appending model data properly in this code snippet? html: <div ng-app="app"> <div ng-controller="con1"> <input ng-model="mydata"/> <br/> {{ mydata }} </div> </div> an ...

angularjs

When Controller Scope Goes Missing in ng-repeat

Upon glancing at my code, it should be evident that I am a newcomer to the world of Angular. I am currently developing an application that enables users to search for text, queries a database whenever the value in the text input changes, and displays a li ...

javascriptangularjs

Ways to display additional selected values in a select menu

I have a basic form on my website that includes options like: Select 1 and Select 2. I would like to set it up so that if I select value Home in Select 1, the value in Select 2 changes to something like residence. How can I achieve this using a database? ...

javascriptphpjquery