vrimar/construct-ui

<th> used in column context in Table fails to render last row bottom border on <td>

angrytongan opened this issue · 3 comments

When <th> is used in a column context, the final row bottom border does not display underneath <td> elements. When using <th> in a row context, or with { bordered: true }, it does render correctly.

const {
    Table,

} = CUI;

const TableRendering = {
    view: () => {
        return m('', [
            m('', [
                m('p', m.trust('Table with <i>th</i> in top row')),
                m(Table, [
                    m('tr', [
                        m('th', 'heading row 1 column 1'),
                        m('th', 'heading row 1 column 2'),
                        m('th', 'heading row 1 column 3'),
                    ]),
                    m('tr', [
                        m('td', 'data row 2 column 1'),
                        m('td', 'data row 2 column 2'),
                        m('td', 'data row 2 column 3'),
                    ]),
                    m('tr', [
                        m('td', 'data row 3 column 1'),
                        m('td', 'data row 3 column 2'),
                        m('td', 'data row 3 column 3'),
                    ]),
                ]),
            ]),

            m('', [
                m('p', m.trust('Table with <i>th</i> in first column')),
                m(Table, [
                    m('tr', [
                        m('th', 'heading row 1 column 1'),
                        m('td', 'data row 1 column 2'),
                        m('td', 'data row 1 column 3'),
                    ]),
                    m('tr', [
                        m('th', 'heading row 2 column 1'),
                        m('td', 'data row 2 column 2'),
                        m('td', 'data row 2 column 3'),
                    ]),
                    m('tr', [
                        m('th', 'heading row 3 column 1'),
                        m('td', 'data row 3 column 2'),
                        m('td', 'data row 3 column 3'),
                    ]),
                ]),
            ]),

            m('', [
                m('p', m.trust('Table with <i>th</i> in second column')),
                m(Table, [
                    m('tr', [
                        m('td', 'data row 1 column 1'),
                        m('th', 'heading row 1 column 2'),
                        m('td', 'data row 1 column 3'),
                    ]),
                    m('tr', [
                        m('td', 'data row 2 column 1'),
                        m('th', 'heading row 2 column 2'),
                        m('td', 'data row 2 column 3'),
                    ]),
                    m('tr', [
                        m('td', 'data row 3 column 1'),
                        m('th', 'heading row 3 column 2'),
                        m('td', 'data row 3 column 3'),
                    ]),
                ]),
            ]),
        ]);
    },
};

document.addEventListener('DOMContentLoaded', () => {
    m.route(document.body, '/', {
        '/': TableRendering
    });
});

Could you explain a bit further? This is what I'm seeing on latest Chrome Mac OS.

Capture

Latest Chrome on Mac OS X here. I'm running off the 1.0.0 branch.

Screen Shot 2020-03-17 at 10 21 41 am

Fixed in v0.2.4.