Resizer line mis-placed when using padding/margin/borders on the cells

The position calculation for the resizer line seems not to include cell padding values or any other decoration like borders and is more and more offset the further right you start dragging.

To reproduce:

• Create a table with enough columns, which are enabled to resize them.
• Use this CSS rule to apply some padding:

.dataTable__header-cell,
.dataTable__row-cell {
    padding: 0px 5px;
}

Now try to resize a column. If you start left the resize line is close to the cursor (and column right border). The further right a column is, the larger is the distance between the right column border and the resize line.

A passable workaround is to set the padding on the row text class, though it’s not perfect.

[nihgwu]

you don’t need to create the style by yourself, you can inherits from https://github.com/Autodesk/react-base-table/blob/master/src/_BaseTable.scss if you are using scss, or modify from react-base-table/styles.css

about the borders, yes it’s not intuitive right now, I’ll find a solution in the next version

[mike-lischke]

Maybe you can mention that somewhere (e.g. in the Resize demo)?

Also, it’s probably a good idea to provide a default style sheet for values you deem necessary. I created my own CSS, partially by inspecting the styles of the example pages.

For the borders: I’m not sure this is a good idea from a performance standpoint. Shadows (and the browser would have to compute one for each cell) are much more expensive than straight lines.