I have problem with my datatable: it has to have a specific width, but also I want to display all its columns. The whole issue looks like this:
I found solutions Datatables Width Overflow For A Lot Of Columns and JQuery Datatables overflow, but I would rather use word breaking then have a scrollbar in my table.
So, I found another solution jQuery DataTable overflow and text-wrapping issues according to which i had to set:
table.display { table-layout:fixed; }
th, td { word-wrap:break-word; overflow:hidden; text-overflow: ellipsis; }
However, with this I had a problem with column width; all columns have same width and option "bAutoWidth: true" is ignored:
For example, there is an empty horizontal space in Price column, or after icons at last column. Moreover word-broken headers (th) seem very ugly, and it would look better if Code, Count, Price and Place columns were at their minimum size (their width matched width of header text).
I would like to specify (somehow) preferred width for each column, or after how many letters it should wrap. I found breakCellText plugin in this post jQuery DataTable overflow and text-wrapping issues. Nevertheless, this plugin is not working with my datatables 1.9.4.
I had the same problem. Here is my solution:
.dt-index {
column-width: auto !important;
}
Please use this style for your table.
I hope that will be your solution.
Greetz
Vegeta_77
Related
I'm trying to implement the resizing feature with React-Table and the Hook useResizeColumns.
I want to force the table to take always the full width of its container.
Only the columns should change theirs size. Not the table.
If you take a look into this example that I made here. (Codesandbox)
You can easily resize the column to surpass the red container.
And for some reason if you minimize the columns size, the table will fit always the container !
I don't understand the behavior here.
Any ideas ?
Thank you very much.
You need to set the max width for the table. You can use this code.
const defaultColumn = React.useMemo(
() => ({
width: 100,
minWidth: 50,
maxWidth: 100
}),
[]
);
const { headerGroups, rows, prepareRow } = useTable(
{
columns,
data,
defaultColumn
},
useResizeColumns,
useFlexLayout
);
After altering this, the table stays within its container.
Source:
https://codesandbox.io/s/intelligent-brook-0qicz?file=/src/App.js:1187-1314
If you want a CSS solution, you have two options. Option #1 is probably what you want, but your intention is a bit unclear, so I've included a second option, just in case I've misunderstood your intention.
Option #1: (Give the table a scrollbar, mimicking the behavior most React tables seem to prefer.)
.table {
overflow: auto;
}
or Option #2: (Shrink the columns to fit within the table)
.td, .th, .tr {
flex-shrink: 1 !important;
min-width: auto !important;
}
Found the fix. You need to fix your css for table to have display:inline-block;. It is weird that a css fixes the issue :-). You can see the fixed issue over here https://codesandbox.io/s/react-table-with-full-width-forked-rbi6u
.table {
border: 2px red solid;
display:inline-block;
}
Please try the sandbox again as I had missed saving the fix in codesandbox.
I am using Datatables on a site with bootstrap and jquery for a large (2000+ entries) table. Some of the (text) values are way too long and at the moment I use something like this:
render: function ( data, type, row ) {
return data.length > 35 ?
data.substr( 0, 35 ) +'…' :
data;
}
in Datatables to cut the strings and display the full value in the html title.
Is there a better way to do this? Like a plugin that automatically cuts but shows all when clicked on or something similar? I was not able to find something.
I saw jquery dotdotdot but it doesnt give me a click to extend.
Modifying strings in javascript in order to make them more viewable or "fitted" to certain DOM elements is a total no-go. Especially when you as here have many strings that is being preprocessed in a callback.
If you force fixed widths to some (or all) columns, example :
table.dataTable td:nth-child(3) {
max-width: 100px;
}
Then you can use simple CSS to ensure that the content of the columns not is wrapped, not go beyond margins and displays a nice ellipsis if it is too large by
table.dataTable td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
demo -> http://jsfiddle.net/ax1gr1og/
I use tablesorter (https://github.com/Mottie/tablesorter), with widget scroller.
You can find examples here : http://mottie.github.io/tablesorter/docs/example-widget-scroller.html
My problem is when tablesorter is contained into other tables like
<table>
<tr>
<td>
table sorter table
</td>
</tr>
</table>
table sorter does not take 100% of the width... And the horizontal scrollbar does not appear automatically.
You can find a example here : http://jsfiddle.net/oqfq47fc/8/
Whereas if table sorter is not contained in other table, its works...
You can find a example here : http://jsfiddle.net/oqfq47fc/9/
Can you help me? I works in portal context and contents portlets are inside table, and it is not possible to remove nested tables.
I think it's just a matter of css, but I know no more...
EDIT
I need that table takes 100% of width like this picture :
And when I resize the browser and that the all table can not display in the available space, a horizontal scrollbar appear at the bottom of the table like this picture :
It works good in my first example.
But in my second example with the outer table, the table look like this picture :
And when I resize the browser, the horizontal scroll bar does not appear on table but on window like this picture :
table{
display: block;
max-width: 100%;
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
}
table.data-table,table#tvar_1{
display: table;
}
html{
overflow-x: hidden;
}
.tablesorter-scroller-table{
width: 100% !important;
}
Fiddle
Adding this set of code is as close as I can get to reproducing what you want with strictly tables. You are using tables for layout and you really shouldn't be doing that. The best way to go is to use the div the way you are in the second iteration where it is correct. It obviously displays the correct and best way. Also, with what I had to do to these tables it is not nice.
Do your best to avoid tables where tables are not needed. This is tabular data so it is needed, but using a table to construct the page is not the right way to go.
I'm creating a table and populating it using javascript. I want to add a vertical scroll bar to the table, but on the data only, i.e. I want the table header to remain fixed, i.e. not be included in the scroll.
I want to use only javascript, CSS and valid HTML5 elements. At this stage I want to exclude jQuery. There have been many discussions on this topic, usually including horizontal scroll bars. I'm only interested in vertical scrolling and to me it is essential that the header columns must be aligned with the table data when scrolled. The discussions and my attempts to achieve this, lead me to believe this is impossible. If this is not the case can someone tell me how this is done?
So far I have made a number of attempts. Adding
table {
display: block;
height: 300px;
overflow: scroll;
}
causes vertical scrolling of the whole table, including the header and data, but the headers and data are aligned. Adding
thead {
display: block;
}
tbody {
display: block;
height: 300px;
overflow: scroll;
}
results in the header not scrolling, but the headers and data columns are no longer aligned. What appears to be happening is that the width of the header columns no longer takes account of the data columns.
I've tried numerous other approaches without success. I've had partial success by adding the same width value to header and data field columns based on the maximum field size, in characters, of the header and data values. With this approach I can get the header to align with the data for most columns. However, I don't regard this as an adequate solution, as it is in general not possible, or at least very difficult, to determine a value in em, px or mm, that will hold n characters exactly.
In the discussions I've seen, it seems that what I want to achieve is possible using jQuery. I've not yet embraced jQuery, but if it can easily enable what I want, it may be the time to do so. Can anyone confirm if what I want is possible in jQuery?
I find it hard to believe that what I want to do is not easily possible, as I would regard it as essential for any adequate handling of tables.
Maybe not the answer you're looking for, but a rather simple solution would be to put all the scrollable rows and columns within a scrollable div, and keep the headers and footers outside that div.
If you are willing to set your columns at a fixed width, you can basically make two tables - one for the header and one for the body, and then just set scrolling on the body.
HTML:
<table class="header">
<thead>
<td>Header</td><td>Header</td><td>Header</td>
</thead>
</table>
<table class="body">
<tbody>
<tr><td>data</td><td>data</td><td>data</td></tr>
...
</tbody>
</table>
And your css:
td, th{
width:50px;
}
table.body{
display: block;
height: 300px;
width:200px;
overflow: scroll;
}
See this jsFiddle.
I have a few columns that are very long and i want to show all of the content so i want to setup jqgrid to have the height of each row able to show multiple lines of text in one cell which word wraps
is this possible
The following bit of CSS will enable word wrap:
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
See this link for more information.