How to set some settings: order, highlight zeroes, separator

Hi,

thanks for your question, and sorry for the trouble.

1) This is possible with CSS code. For example, use

.tablepress-id-123 .column-3,
.tablepress-id-123 .column-5,
.tablepress-id-123 .column-6 {
  text-align: right;
}
.tablepress-id-123 .column-1,
.tablepress-id-123 .column-2,
.tablepress-id-123 .column-4 {
  text-align: center;
}

(where 123 is the ID of the table) to align some columns right and some center.

2) This should be possible with a “Custom Command”. For example, add this to the “Custom Commands” text field on the “Edit” screen of the table:

"columnDefs": [ { "render": $.fn.dataTable.render.number( ' ', ',' ), "targets": [ 1, 2, 5 ] } ]

This should show the numbers like that for column 2, 3, and 6 (counting the columns starts with 0 for the first column).

3) This could also be achieved by that method, e.g. using the “Custom Command”

"columnDefs": [ { "targets": [ 4, 5 ], "createdCell": function( nTd, data, oData, iRow, iCol) { if ( data < 0 ) { $(nTd).css('color', 'red'); } } } ]

Regards,
Tobias

Thanks!!
test it. work properly only 1 part.(have 1 additional question about it, but ask later, when we solving 2 and 3)

i test on this sample table (you can import it)
№ Column 1 Column 2 Column 3 Column 4
1 Line 1 2118823054 83858 1111104,0
2 sfdgfgdfg -9911646 -86600 -113,0
3 Third 2876591 28748 98,5
4 Great name big 77281 468 179,8
5 Befo last 2924816 29743 101,5
6 Last one 9504700 207560 45,8

2.1) When i apply this script to sample table ST (listned above) the last column loosing fractional part of number. ex. “179,8” is shown like “179”
2.2) Maybe somewhere in your plugin is any setting – which symbol is delimeter betwen integer and fractional parts – “.” or “,”?

3.1) Try to apply 3 to ST – also have problem whith last column – it’s not applaing the script, because of 2.2 problem, how to fix it?

4.1) How to combine script 2 and 3 at one script?
4.2) How to conbine this lines:
"columnDefs": [ { "targets": [ 2, 3, 4 ], "createdCell": function( nTd, data, oData, iRow, iCol) { if ( data < 0 ) { $(nTd).css('color', 'red'); } } } ]
and
"columnDefs": [ { "targets": [ 2, 3, 4 ], "createdCell": function( nTd, data, oData, iRow, iCol) { if ( data > 0 ) { $(nTd).css('color', 'green'); } } } ]

• This reply was modified 4 years, 1 month ago by wor012.
• This reply was modified 4 years, 1 month ago by wor012.
• This reply was modified 4 years, 1 month ago by wor012.

Hi,

in total, please try this:

"columnDefs": [ { "render": $.fn.dataTable.render.number( ' ', ',', 2 ), "targets": [ 1, 2, 5 ] }, { "targets": [ 2, 3, 4 ], "createdCell": function( nTd, data, oData, iRow, iCol) { if ( data < 0 ) { $(nTd).css('color', 'red'); } if ( data > 0 ) { $(nTd).css('color', 'green'); } } } ]

Regards,
Tobias

Thanks. It works
"columnDefs": [ { "render": $.fn.dataTable.render.number( ' ', ',', 1 ), "targets":[4] } , { "render": $.fn.dataTable.render.number( ' ', ',', 0 ), "targets":[2,3] } , { "targets":[2,3,4], "createdCell": function(nTd,data,oData,iRow,iCol) { if (data<0) { $(nTd).css('color','red'); } if (data>0) { $(nTd).css('color','green'); } } } ]

Dot must be the delimeter. With dot “.” all works, e.g. (data>0)

5.1) It’s possible to set code (1) not in CSS section of the hole plugin but ex. in “Custom Command” section?
Becuase there is about 200+ tables on site and it will be uncomfortably to edit this long css code section.
Also sugest: Maybe you can implement it somewhere in interface in future?
ex. in “table content” section “order type of column”.

5.2) Also if now 5.1 it’s impossible – sugest:
disable auto formatting in “Users CSS” code section – beacuse for me it would be better to view like this (in one string)
.tablepress-id-2 .column-3,.tablepress-id-2 .column-4,.tablepress-id-2 .column-5 {text-align: right;}
but not like this (in 5 string only for one table

.tablepress-id-2 .column-3,
.tablepress-id-2 .column-4,
.tablepress-id-2 .column-5 {
	text-align: right;
}

And set more width of this edit box. because it’s a lot of space on my screen from left and right of the edit box.

5.3) Also sugest: in “Table content” section write somewhere the numbers of columns, not only letters.
E.x. A (1) B (2) C (3) D (4)

6) Why “Search box” appeared not good. See screen
https://snipboard.io/pzJ4x2.jpg
Horizontal scrool is on. And table view is ok, but why search box is not ordered by the right edge of table? How to fix it?

• This reply was modified 4 years, 1 month ago by wor012.
• This reply was modified 4 years, 1 month ago by wor012.

Hi,

5.1) You could achieve this with setting CSS classes via the “Custom Commands”.
For example, add this “Custom CSS” (necessary just once):

.tablepress .column-align-right {
  text-align: right;
}
.tablepress .column-align-center {
  text-align: center;
}

Then, you can use something like this in the “Custom Commands”:

"columnDefs": [ { className: "column-align-right", "targets": [ 0, 4, 5 ] }, { className: "column-align-center", "targets": [ 1, 2, 3 ] } ]

I don’t have plans to make this available via the user interface at the moment, sorry. The same holds for that “A (1), B (2), …” idea.

To fix the search box problem, please also add

.dataTables_wrapper .tablepress {
  width: 100% !important;
}

to the “Custom CSS”.

Regards,
Tobias

Hi. Thanks for help!
6)

.dataTables_wrapper .tablepress {
  width: 100% !important;
}

It’s not working. it expand table to the whole page width
And i don’t need it

i need: table must stay where it’s now (see screen above), but the search box must will appeared where the table is. E.g. not table must go right, but search box must go left.

7) Can you help with one feature – sometimes i need in technical column from the left of the table – “number of order” it must always be from the 1 to TableCount – always – no matter of current order column
How to implement it?

• This reply was modified 4 years, 1 month ago by wor012.
• This reply was modified 4 years, 1 month ago by wor012.

Hi,

6) How did you get the table to be smaller then? Did you use CSS code? If so, you could try applying that command to the .dataTables_wrapper CSS selector.

7) For that, you can use https://tablepress.org/extensions/datatables-counter-column/

Regards,
Tobias

6)

Did you use CSS code?

No, it’s standart settings – use gorizontal scroll bar – and if the table is small (not many columns) it fills not the whole page size.
And i don’t understand – what i must try?

you could try applying that command to the .dataTables_wrapper CSS selector.

7) Thanks. Works! Only 1 question – why there is arrow buttons in the first “fixed” column? See screen https://snipboard.io/iIa0y7.jpg

8) I try to change row height – use padding (find in forum):

.tablepress thead th {padding: 6px 10px 10px 10px !important;}
.tablepress tbody td {padding: 6px !important;}

But appeared some strange row in header – see screen above – how to remove it?

9) How to remove gray grid line between rows?

• This reply was modified 4 years, 1 month ago by wor012.
• This reply was modified 4 years, 1 month ago by wor012.
• This reply was modified 4 years, 1 month ago by wor012.
• This reply was modified 4 years, 1 month ago by wor012.

Hi,

6) Ah, ok. Then you are actually experiencing an error. To set a desired width, please use this “Custom CSS”:

.dataTables_wrapper .tablepress {
  width: 100% !important;
}
#tablepress-123_wrapper {
  width: 400px;
  margin: 0 auto 1em !important;
}

Change the 123 to the correct table ID, and the 400px to the desired width.

7) That’s strange. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

8) That’s an extra row from the FixedHeader Extension. This method of changing the row height is not working here.

9) Please see https://tablepress.org/faq/remove-borders-from-a-table/

Regards,
Tobias

Hi.
6.1) This code works not so correct – because he place the whole table at center of the page, but i need from the left.
6.2) And i dont want to set width of the table – autowidth is good for me (with option – allow horizont scroll). And also, as i write above – i don’t want to set some settings in global css, because i have about 200 tables on site. For me better to set all at tables page settings. Is any way to set it there?

7) https://h312432.r01host.ru/test1

8) Thanks. It works, but it’s about 7 lines of code at every table – its bad for me.
Because of reason – (6.2) Is any way to set it for all tables once (by one group of commnds)?

• This reply was modified 4 years, 1 month ago by wor012.
• This reply was modified 4 years, 1 month ago by wor012.

Hi,

6.1) Okay, then remove the margin: ...; part.

6.2) Unfortunately, that’s not possible here. You will have to do it like this. It will affect all tables if you change

#tablepress-123_wrapper {

to

.dataTables_wrapper {

7) Ah, I see. We need to modify the “Custom Command”. Please use

"columnDefs": [
 { "searchable": false, "orderable": false, "targets": 0 },
 { className: "col-right", "targets": [2,3,4] },
 { "render": $.fn.dataTable.render.number( ' ', ',', 1 ), "targets":[5] } ,
 { "render": $.fn.dataTable.render.number( ' ', ',', 0 ), "targets":[3,4] } ,
 { "targets":[3,4,5], "createdCell": function(nTd,data,oData,iRow,iCol) { if (data<0) { $(nTd).css('color','red'); } if (data>0) { $(nTd).css('color','green'); } } } ]

(I basically inserted

{ "searchable": false, "orderable": false, "targets": 0 },

).

8) Just replace .tablepress-id-2 with .tablepress in the CSS code ??

Regards,
Tobias

Thanks!
7,8) Works!

6) Hm. Works, but it’s not elegant, i think, because in order to set seachbox to correct place – i must change the default calculated table width.
As a suggest – it would be better not to change the witdh, but create setting – ex. SearchBoxPlace = {RightOfThePage, RightOfTheTable, Left…}
Now i disabled this searchbox – it’s better not to show him in that case of small table i think.

9) How can i change the row height?

10) How can i change column width (maybe in percent of autowidth)?
(maybe you wrote it somewhere in forum, but i ask again (hope it’s last question))

• This reply was modified 4 years ago by wor012.
• This reply was modified 4 years ago by wor012.

Hi,

6) This is not possible, because the search field can not know the position of the table, because the table is “inside” the container element.

9) For the row height, try

.tablepress th,
.tablepress td {
    padding-top: 20px;
    padding-bottom: 20px;
}

10) See https://tablepress.org/faq/column-widths/

Regards,
Tobias

6, 9) Ok

10.1) Is any way to set global padding for column width for all tables?
10.2) Also is any way to set width in pixels or padding in the “Custom Commands” instead of global css?

• This reply was modified 4 years ago by wor012.

Hi,

10.1) You can also do this globally, again by using .tablepress instead of .tablepress-id-123.

10.2) No.

Regards,
Tobias