How to create a stretchable table - ita-social-projects/OoS-Frontend GitHub Wiki

How to add stretch functionality

To add stretch functionality, you need to add a appStretchTable directive to the <table> tag

image

After adding the directive, a border appears on the columns on hover. When clamping the border, you can change the size of the column.

image


Important! Stretch functionality is not added to columns:

  • The last column in the table
  • The column has a stickyEnd directive
  • The column is before the column with the stickyEnd directive

Possible operation settings

By default, the width of the table is divided equally between the columns. If we need to set an initial width for some table, this can be done by adding the width style to the <th> tag.

image

This column will be set to the specified width, and the remainder of the width will be distributed among the remaining columns.

Features of work

  • Columns cannot be reduced if the total width of the columns is less than the width of the table container
  • Changing the width of a column does not affect the width of adjacent columns.
  • Column cannot be reduced less than 50px
  • When the total width of the columns becomes greater than the width of the table container, a scrollbar appears at the bottom

image

⚠️ **GitHub.com Fallback** ⚠️