![]() What you can do to stop this behaviour in DataTables is set the autoWidth parameter to false. The reason it does this is to stop the table and the columns (the column widths are also set) jumping around in width when you change pagination. Responsive design is all about adjusting designs to accommodate screens of different sizes. v-data-table The standard data table presumes that the entire data set is available locally. Usage There are three variants of the data table available depending on your requirements. Features include sorting, searching, pagination, grouping, and row selection. Tables can flex in width, but they can only get so narrow before they start wrapping cells contents uncomfortably or just plain can’t get any narrower. Data tables The v-data-table component is used for displaying tabular data. I hot fixed it by adding an arbitrary width to the flexbox (for example width:1px, which gets overridden by the flexbox attributes) and the flexbox shrank accordingly, which let the datatable recalculate its available space accordingly.What is happening is that DataTables is setting the CSS width of the table when it is initialised to a calculated value - that value is in pixels, hence why it won't resize with your dragging. A single row of data needs to be kept together to make any sense in a table. 1200px) and table wrapper recalculates its available space to 1200px, but as I decreased the window size, the flexbox kept its larger width (to wrap the table wrapper) and therefore it didnt forced the shrink on the datatable. But the flexbox wraps its content and therefore always includes its child elements (the tablewrapper)Īs soon as I increased the window size, the flexbox grew (100% windowsize, i.e. The ngx-datatable calculates a fixed width based on the available space of the parent element (i.e 100% of flexbox, lets say 1000px wide window) and applies an width attribute to the tablewrapper (width:1000px). Not sure if its relevant, but my problem was the fixed child width of the datatable. I had a similar issue, but in conjunction with flexbox and the datatable scrollbars. What is the motivation / use case for changing the behavior?īrowser: On my call in line: 31, I'm using all the table columns, so, that's why it won't work the first time it loads in mobile devices the buttons should be shown there. I'll try to get a plunker up but it's entirely possible that there something else causing this that is specific to my app. As far as I understand the event: 'responsive-resize' will be called with an array of boolean values indicating the columns that were rearranged. It would re-render the width for enlarging and shrinking window. When rendering the datatable in a view and not absolutely positioned, the initial width is set and making the window larger triggers a resize, but shrinking it does not. ![]() The width of the columns is determined automatically in order to accommodate the content in the. support request => Please do not submit support request here, post on Stackoverflow or Gitter By default, the table will expand to the width of its container. ![]() If no breakpoint class is found for a column, Responsive will determine automatically if the column should be shown or not at any particular viewport width. A single row of data needs to be kept together to make any sense in a table. Responsive will automatically detect which columns have breakpoint class names assigned to them for visibility control. ![]() Data tables can be quite wide, and necessarily so. The process is: When you click on a tab which was initially hidden, that click event triggers a recalculation of the required column widths for the table in the tab - and this will cause the appropriate responsive columns to be drawn. Bug report => search github for a similar issue or PR before submitting Data tables don’t do so well with responsive design. 1 Answer Sorted by: 4 You can combine Bootstrap's tab events with the DataTable responsive.recalc () API call. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |