This component will be removed soon.
Potentially does too much work. Consider if should be multiple components: Table, TableHeader, SortableTable, etc.
Table (Deprecated)
unstyled#
<Tabledata={[{name: 'Lil Bub',color: 'brown tabby',famous_for: 'weird tongue',},{name: 'Grumpy Cat',color: 'siamese',famous_for: 'serving moods',},{name: 'Smoothie',color: 'orange tabby',famous_for: 'modeling',},{name: 'Maru',color: 'brown tabby',famous_for: 'being a lovable oaf',},{name: 'Keyboard Cat',color: 'orange tabby',famous_for: 'piano virtuoso',},{name: 'Long Cat',color: 'russian white',famous_for:'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',},]}columns={[{label: 'Name',key: 'name',columnSortable: true,onSort: () => {},width: 'col-3',},{label: 'Famous For',key: 'famous_for',columnSortable: false,onSort: () => {},width: 'col-6',},{label: 'Coat Color',key: 'color',columnSortable: false,hideHeader: true,onSort: () => {},width: 'col-3',},]}caption="Famous Internet Cats"/>
table-striped#
<Tabledata={[{name: 'Lil Bub',color: 'brown tabby',famous_for: 'weird tongue',},{name: 'Grumpy Cat',color: 'siamese',famous_for: 'serving moods',},{name: 'Smoothie',color: 'orange tabby',famous_for: 'modeling',},{name: 'Maru',color: 'brown tabby',famous_for: 'being a lovable oaf',},{name: 'Keyboard Cat',color: 'orange tabby',famous_for: 'piano virtuoso',},{name: 'Long Cat',color: 'russian white',famous_for:'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',},]}columns={[{label: 'Name',key: 'name',columnSortable: true,onSort: () => {},width: 'col-3',},{label: 'Famous For',key: 'famous_for',columnSortable: false,onSort: () => {},width: 'col-6',},{label: 'Coat Color',key: 'color',columnSortable: false,hideHeader: true,onSort: () => {},width: 'col-3',},]}caption="Famous Internet Cats"className="table-striped"/>
default heading#
<Tabledata={[{name: 'Lil Bub',color: 'brown tabby',famous_for: 'weird tongue',},{name: 'Grumpy Cat',color: 'siamese',famous_for: 'serving moods',},{name: 'Smoothie',color: 'orange tabby',famous_for: 'modeling',},{name: 'Maru',color: 'brown tabby',famous_for: 'being a lovable oaf',},{name: 'Keyboard Cat',color: 'orange tabby',famous_for: 'piano virtuoso',},{name: 'Long Cat',color: 'russian white',famous_for:'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',},]}columns={[{label: 'Name',key: 'name',columnSortable: true,onSort: () => {},width: 'col-3',},{label: 'Famous For',key: 'famous_for',columnSortable: false,onSort: () => {},width: 'col-6',},{label: 'Coat Color',key: 'color',columnSortable: false,hideHeader: true,onSort: () => {},width: 'col-3',},]}caption="Famous Internet Cats"headingClassName={['thead-default']}/>
responsive#
<Tabledata={[{name: 'Lil Bub',color: 'brown tabby',famous_for: 'weird tongue',},{name: 'Grumpy Cat',color: 'siamese',famous_for: 'serving moods',},{name: 'Smoothie',color: 'orange tabby',famous_for: 'modeling',},{name: 'Maru',color: 'brown tabby',famous_for: 'being a lovable oaf',},{name: 'Keyboard Cat',color: 'orange tabby',famous_for: 'piano virtuoso',},{name: 'Long Cat',color: 'russian white',famous_for:'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',},]}columns={[{label: 'Name',key: 'name',columnSortable: true,onSort: () => {},width: 'col-3',},{label: 'Famous For',key: 'famous_for',columnSortable: false,onSort: () => {},width: 'col-6',},{label: 'Coat Color',key: 'color',columnSortable: false,hideHeader: true,onSort: () => {},width: 'col-3',},]}caption="Famous Internet Cats"className="table-responsive"/>
sortable#
() => {const catData = [{name: 'Lil Bub',color: 'brown tabby',famous_for: 'weird tongue',},{name: 'Grumpy Cat',color: 'siamese',famous_for: 'serving moods',},{name: 'Smoothie',color: 'orange tabby',famous_for: 'modeling',},{name: 'Maru',color: 'brown tabby',famous_for: 'being a lovable oaf',},{name: 'Keyboard Cat',color: 'orange tabby',famous_for: 'piano virtuoso',},{name: 'Long Cat',color: 'russian white',famous_for:'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',},];const catColumns = [{label: 'Name',key: 'name',columnSortable: true,onSort: () => {},width: 'col-3',},{label: 'Famous For',key: 'famous_for',columnSortable: false,onSort: () => {},width: 'col-6',},{label: 'Coat Color',key: 'color',columnSortable: false,hideHeader: true,onSort: () => {},width: 'col-3',},];const sort = function sort(firstElement, secondElement, key, direction) {const directionIsAsc = direction === 'asc';if (firstElement[key] > secondElement[key]) {return directionIsAsc ? 1 : -1;} else if (firstElement[key] < secondElement[key]) {return directionIsAsc ? -1 : 1;}return 0;};const catDataSortable = catData.slice();return (<Tabledata={catDataSortable.sort((firstElement, secondElement) =>sort(firstElement, secondElement, catColumns[0].key, 'desc'),)}columns={catColumns.map(column => ({...column,onSort(direction) {catDataSortable.sort((firstElement, secondElement) =>sort(firstElement, secondElement, column.key, direction),);},}))}caption="Famous Internet Cats"tableSortabledefaultSortedColumn={catColumns[0].key}defaultSortDirection="desc"/>);};
fixed#
<Tabledata={[{name: 'Lil Bub',color: 'brown tabby',famous_for: 'weird tongue',},{name: 'Grumpy Cat',color: 'siamese',famous_for: 'serving moods',},{name: 'Smoothie',color: 'orange tabby',famous_for: 'modeling',},{name: 'Maru',color: 'brown tabby',famous_for: 'being a lovable oaf',},{name: 'Keyboard Cat',color: 'orange tabby',famous_for: 'piano virtuoso',},{name: 'Long Cat',color: 'russian white',famous_for:'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',},]}columns={[{label: 'Name',key: 'name',columnSortable: true,onSort: () => {},width: 'col-3',},{label: 'Famous For',key: 'famous_for',columnSortable: false,onSort: () => {},width: 'col-6',},{label: 'Coat Color',key: 'color',columnSortable: false,hideHeader: true,onSort: () => {},width: 'col-3',},]}caption="Famous Internet Cats"hasFixedColumnWidths/>
row header#
<Tabledata={[{name: 'Lil Bub',color: 'brown tabby',famous_for: 'weird tongue',},{name: 'Grumpy Cat',color: 'siamese',famous_for: 'serving moods',},{name: 'Smoothie',color: 'orange tabby',famous_for: 'modeling',},{name: 'Maru',color: 'brown tabby',famous_for: 'being a lovable oaf',},{name: 'Keyboard Cat',color: 'orange tabby',famous_for: 'piano virtuoso',},{name: 'Long Cat',color: 'russian white',famous_for:'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',},]}columns={[{label: 'Name',key: 'name',columnSortable: true,onSort: () => {},width: 'col-3',},{label: 'Famous For',key: 'famous_for',columnSortable: false,onSort: () => {},width: 'col-6',},{label: 'Coat Color',key: 'color',columnSortable: false,hideHeader: true,onSort: () => {},width: 'col-3',},]}caption="Famous Internet Cats"rowHeaderColumnKey="name"/>
Theme Variables (SCSS)#
$table-cell-padding: .75rem !default;$table-cell-padding-sm: .3rem !default;$table-color: $body-color !default;$table-bg: null !default;$table-accent-bg: rgba($black, .05) !default;$table-hover-color: $table-color !default;$table-hover-bg: rgba($black, .075) !default;$table-active-bg: $table-hover-bg !default;$table-border-width: $border-width !default;$table-border-color: $border-color !default;$table-head-bg: theme-color("gray", "background") !default;$table-head-color: theme-color("gray", "text") !default;$table-dark-color: $white !default;$table-dark-bg: theme-color("gray", "hover") !default;$table-dark-accent-bg: rgba($white, .05) !default;$table-dark-hover-color: $table-dark-color !default;$table-dark-hover-bg: rgba($white, .075) !default;$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;$table-dark-color: $white !default;$table-striped-order: odd !default;$table-caption-color: $text-muted !default;$table-bg-level: -9 !default;$table-border-level: -6 !default;