Columns jump on column click (sort)

[binary64]

Is there a way to keep column widths the same, but still automatic?

Whenever I sort by column, the column header I clicked on jumps left/right

[RobertoPrevato]

Yes, this scenario is contemplated.

In the first version of the library the width of columns was fixed after first render, but this wasn't a good solution, because each scenario may bring different needs.

The library now helps this way: it adds to each th and td element a classname that matches the property name (using kebab-case), so its width can be easily styled using CSS rules. This is described in documentation, here: https://github.com/RobertoPrevato/KingTable/wiki/Styling.

This is a better solution because the developer knows the data he's handling and can make better decisions using CSS.

For example (using LESS):

.king-table tr {
  th, td {

    &.name {
      width: 130px;
    }

    &.color {
      width: 120px;
    }

    &.red, &.green, &.blue {
      width: 120px;
    }

    &:last-child {
      width: auto !important;
    }
  }
}

Consider also using following CSS rules, when convenient (adding fixed width and eventually other ways to display full content):

th, td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}