GitHubGet started
v1.2.0

Supports CSS styling of ‹table›

Table, Bro uses standard ‹table› CSS styling, allowing you to apply any of your existing ‹table› styles:

Loading
Items per page:
0 of 0
Clear
import type {BroConfig} from '@table-bro/core';

const config: BroConfig = {
  css: {
    table: {
      className: '',

      thead: {
        className: '',

        tr: {
          className: 'bro-header-row',

          th: {
            className: 'bro-header-cell'
          }
        }
      },

      tbody: {
        className: '',

        tr: {
          className: 'bro-row',

          td: {
            className: 'bro-cell'
          }
        }
      }
    },

    shadow: {
      className: 'shadow'
    }
  }
};

Your CSS of these classes, as of any ‹table› of the page:

table-bro th.bro-header-cell,
table-bro td.bro-cell {
  padding: 0 0 0 16px;
}

table-bro tr.bro-header-row {
  height: var(--bro-header-height);
}

table-bro tr.bro-row {
  height: var(--bro-row-height);
}

table-bro table {
  border-color: #dee2e6;
}

table-bro.bro-dark-theme table {
  border-color: #495057;
}
DJ