Skip to content

Provide Font Awesome integration option #165

Closed
DataTables opened this Issue Mar 6, 2013 · 15 comments

6 participants

@DataTables
Owner

There are a few icons used in DataTables (paging and sorting) and it would make a lot of sense to be able to use Font Awesome (or any other web font) to display these characters. It would increase the willingness of developers to customise the display by making the styling of them much easier. It also has the advantage of Web Fonts in general (one http request, while DataTables currently must make many).

Concerns:

  1. Backwards compatibility - this would require different markup, and Font Awesome to be present. This would make upgrades not as simple as an update to the JS file for DataTables.

  2. IE6 - a surprising number of folks still use DataTables with IE6 ( :-( ). Font Awesome has IE7+ compatibility, and providing a fallback to IE6 seems daft (proving two methods).

I be honest, I can live with dropping IE6 support - I've been considering it for a while (possibly even IE7 support - if folks want them, then use old versions of DataTables), but I'm not sure how to reconcile the backwards compatibility issue yet. Possibly this might have to be put on hold until 1.11 the aim of which is to provide a modular builder - pick the elements you want for DataTables (sorting, filtering, etc) - Font Awesome would be one of those options. But it would be a shame not to implement this immediately. I guess that's the way with all software and great plans... 1.10 first (it will still be awesome :-) ).

@TobiasBg
TobiasBg commented Mar 7, 2013

Do you have statistics on IE6 and IE7 usage, specifically for DataTables? I agree with dropping support for both of them. There's no point in adding the extensive compatibility CSS for these two browsers, just for the few people who are using it. Not seeing sorting and pagination icons should be one of the smaller problems that users of IE6 and 7 are facing. Additionally, dropping IE6 and IE7 might allow you to remove some cruft from DataTables core as well. (Maybe. You know that better than me. :-) )

@DataTables
Owner

It is particularly difficult to get usage statistics since I don't have any way of monitoring the sites which use DataTables. Its most of a 'finger in the air - which way is the wind blowing' kind of thing... The closest I could get is the debugger, but that is mainly used by developers and thus Chrome and Firefox dominate.

There aren't that many hacks in for IE6/7 in DataTables in fairness, only in the scrolling part, so most of it would still work fine, even if that code was actively removed.

Not seeing sorting and pagination icons should be one of the smaller problems that users of IE6 and 7 are facing.

haha! Good point :-)

@rhutchens

+1 for this idea. I was going to suggest making the sorting triangles using CSS borders so the color could be changed via CSS, but using font icons is an even better idea. It might be possible to use CSS borders as an IE 6 fall back measure for arrows, but I think it would require determining the background color as well, because I don't believe IE 6 supports transparent borders.

@jhfrench

+1 Suggest following the lead of jQuery and Bootstrap: when new features dictate abandonment of old browsers, do so. Old versions of DataTables are sufficient for old browsers. New browsers deserve your attention.

@DataTables
Owner

Yup - I'm very much moving in that direction! IE6/7 support will be very limited in DataTables 1.10. I want to try an do a plug-in for this integration before the 1.10 final release (but it will be after the beta), so I can ensure that everything that is needed is available at release time.

@elad
elad commented Apr 2, 2014

I did that in my fork of the Bootstrap 3 plugin for both Font Awesome and Glyphicons Halflings, including RTL support.

If this is still being worked on, I would suggest to experiment with a span inside the th to carry an icon class. It might be easier to deal with for both choosing the icons and positioning them on the left/right.

@DataTables
Owner

Agreed - v1.10 has taken steps in that direction already by providing header 'renderers'. The built in jQuery UI one includes a span tag: https://github.com/DataTables/DataTablesSrc/blob/master/js/ext/ext.renderer.js#L28 .

Note that built-in jQuery UI support will be removed in v1.11 and provided by a plug-in. A built in renderer may still exist though. Possibly specifically designed for an icon font.

@fmorel90
fmorel90 commented Apr 4, 2014

Why not just use sTitle to add the icons? That's what I did to add ▲▼ with some CSS to show if a column is sorted asc/desc.

@elad
elad commented Apr 4, 2014

Could you post your solution so I could give it a try?

I think the problem is that the sorting classes (sSortable etc.) are added to the th element, and from what I understand they should be applied to a span inside the th that could be made to float left or right depending on RTL/LTR.

@fmorel90
fmorel90 commented Apr 4, 2014

I initialize columns that are sortable like this:

{ sTitle: "Change vs Last Year<span class='asc'>▲</span><span class='desc'>▼</span>", sType : "numeric" }

Then in my CSS I have these styles:

/* Sort arrows default to transparent grey. When active, turn black */
th .asc, th .desc { color: rgba(127, 127, 127, 0.3); float: right; }
.sorting_desc .desc, .sorting_asc .asc { color: rgba(0,0,0,1); }

.sorting_desc and .sorting_asc are added by DataTables. I'm only supporting English, so I haven't had to consider RTL/LTR.

sorters

@elad
elad commented Apr 4, 2014

That's a nice solution (and it would be easy to support RTL), but it forces repetition in every column declaration and a certain style. I also don't like having to type out the actual character...

My personal opinion is that since the add/remove class code is already in place in the relevant places, we should try to ride that as much as possible. By default, a span would be added to each th, and you would be able to control the classes it takes in various sorting conditions, just like we have now for the th element itself. (Via oSettings.oClasses or oInit.oClasses - seems to be supported in 1.10).

Then, it's easy to add classes that set some sensible default (maybe the Unicode characters you use above), and it's also easy for a user to change them globally by extending the defaults to any Font Awesome or Glyphicons Halflings (or whatever) icons they want.

Thoughts?

@DataTables
Owner

I haven't tried it yet, but the way I was thinking of doing it was using th:after (with a suitable class for the three sort options), setting the content to be a suitable font character and having it positioned absolute (relative to the th).

@elad
elad commented Apr 4, 2014

Unless I'm misunderstanding you, that's more or less how it works right now - take a look at https://github.com/eladxxx/Datatables-Bootstrap3/blob/rtl_support/BS3/assets/css/datatables.css.

But what if a user wants to change the font characters you pick? they have to override the font class and the character itself in CSS, which isn't very elegant. Not to mention that it's not an obviously "supported" way of using some icon fonts, for example Font Awesome's examples speak solely in terms of classes, not individual characters. For that you have the cheatsheet, but that's said to be for "the desktop."

I think we want to let users say "I want the icon to be fa fa-sort" without them having to go figure out that it's really \xf0dc and then put it in their own CSS. This approach is also much better for RTL, where sometimes you want the opposite for directional icons. (Though maybe not for sort, which is usually up/down. :)

@DataTables
Owner

Oops yes - that looks great to me.

But what if a user wants to change the font characters you pick? they have to override the font class and the character itself in CSS, which isn't very elegant

No more or less so than doing it in Javascript imho. The CSS is there to be customised just as much as the Javascript - possibly even more so. However, I take your point and a header render can read variables for the initialisation which could set the class name if it were so programmed.

@DataTables
Owner

Blog post on this very topic: http://datatables.net/blog/2014-06-06 .

@DataTables DataTables closed this Jul 10, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.