Bootstrap Table Column width - javascript

My table columns for a table in Bootstrap are too small. I would like to be able to increase the width. If I put width as "auto" then it becomes too wide even on a desktop and I have to scroll horizontally. Weird thing is that the column width does not change whether its desktop or tablet. The table rows and header are generated using JavaScript and jQuery.
Each of my columns has in it an input textbox and one column is a select list.

First of all, make sure you have correctly wrapped your page in a .container or .container-fluid. After that, try to size the columns as you usually do with your grid in Bootsrap, as you can read in this answer.
You can make your table responsive wrapping it in a .table-responsive: when the viewport becomes too small, you'll have horizontal scrollbars.

Related

Automatic size in custom table columns

I have made this fully custom data table to display some content dynamically, you can manually change column size and order, doing so all cells are on absolute positioning with set width.
I want to create a function that will check for the "best size" for columns depending on the contents.
Like you would do in Excel for example when you double tap on a column separator (some columns will have long descriptions inside, some just links, etc.).
Cell will only contains texts, it can be wrapped (actually goes into ellipsis when resizing to small) and the rows allow for horizontal scrolling so there is no limitation on this side.
But so far I have no clue on how I can manage to do that, do you have any lead ?

How to freeze css grid column widths after initial display

I'm using CSS Grid to display a table of records. Each column is defined as "auto" because I'd like the column widths to fit the content.
In my app I have a button to fetch the next page of results, and I dynamically repopulate the grid from page 2 of the results. This has the effect of making the grid jump, because, of course, the content of each column on page 2 is not the same as it was on page 1. (I'm populating the table using Vue in a v-for loop.)
Is there any way to freeze the width of the columns after they are initially populated?
The only method I can think of is to use Javascript to get the widths of each column and then rewrite the CSS grid-template-columns value to specify columns as fixed-width. This is possible, but it feels like a kludge.
Maybe there's some CSS magic I don't know about? Something position: sticky, but for column widths?

Dynamic Table Vertical & Horizontal scrolling sticky header and fixed column

I'm developing a solution that presents table like data to the user and the requirements are as follows:
Horizontal scrolling within fixed dimensions. As you scroll horizontally the first column must be sticky and follow the user as they scroll.
Vertical scrolling with a sticky header as the user scrolls up or down they can always see the header.
Found one solution here: http://www.fixedheadertable.com/ which does what I want however, after implementing with my site the table changes width based on the window dimensions. This is not ideal.
I've posted multiple questions on here about this with no conclusive answers.
Primarily asking if anyone knows of any plugins or done something similar to point me in the right direction.
Apply exact width for each column. I hope the sticky header and table contents are in separate tables. So you have to specify width for header as well as table content separately. For example the first <td> of sticky header and first <td> of tabular data should have same width. apply width like this for all columns.
Try SlickGrid:
SlickGrid is an advanced JavaScript grid.
Some highlights:
Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
Column resize/reorder/show/hide

How do you display wide table?

The table is too wide, I don't want it overflow outside the screen and make browser scrollable.
I prefer the table can slide horizontal in a frame, but I need first 2 columns to be fixed, only 3rd to the last column can slide horizontal?
Do you have jQuery code example?
Or do you know any good jQuery plugins that meet my requirement.
Datatables - http://datatables.net/
There is a jQuery adapter that has a ton of features that will allow you to create a table with a fixed column and fluid columns. There are even ways of showing / hiding columns based off of the screen width.
Dynatables - http://www.dynatable.com/
This is said to be the more "fun" alternative. It took concepts from datatables and made it more friendly.
Create two tables, one fixed and one in scrolling div. In first table, put first two columns, in second put rest of columns. Just make sure all cells are same height to get synchronized tables view
---------------------------------------------
|[table1]<div overflow='auto'>[table2]</div>|
---------------------------------------------
JQuery Datatables is the most comprehensive table plugin for paginating, sorting, searching table data. They also have a fixed column plugin, here's an example: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

Design scrollable table structure

I'm currently looking for a way to design a table structure with HTML and JS which should be
Horizontally Scrollable (It has to be possible to dynamically add new columns)
Tolerant to changing sizes (e.g. when adding some text or controls) of cells. E.g. when doubling the size of the second cell in the second row every other cells should stay in the correct columns.
It should be possible to adjust to rendered columns to the width of the screen.
It should be possible to use the same layout with swiping on mobile devices.
= IE8, FF, Chrome must be supported
Currently I'm thinking about a DIV based solution where the correct table structures of the columns and rows are preserved by resizing column and cell DIVs if needed.
That's how it should look:
Is the DIV based solution apropriate or is there a possibility of using the default HTML table?

Categories

Resources