Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions etc/lime-elements.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -792,6 +792,7 @@ export namespace Components {
"movableColumns": boolean;
"page": number;
"pageSize": number;
"paginationLocation": 'top' | 'bottom';
"selectable": boolean;
"selection": object[];
"sortableColumns": boolean;
Expand Down Expand Up @@ -2024,6 +2025,7 @@ export namespace JSX {
"onSort"?: (event: LimelTableCustomEvent<ColumnSorter[]>) => void;
"page"?: number;
"pageSize"?: number;
"paginationLocation"?: 'top' | 'bottom';
"selectable"?: boolean;
"selection"?: object[];
"sortableColumns"?: boolean;
Expand Down
34 changes: 18 additions & 16 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"@types/lodash-es": "^4.17.12",
"@types/react": "^19.1.10",
"@types/react-dom": "^19.1.7",
"@types/tabulator-tables": "^4.9.4",
"@types/tabulator-tables": "^6.2.4",
"codemirror": "^5.65.9",
"cross-env": "^7.0.3",
"dayjs": "^1.11.13",
Expand Down Expand Up @@ -90,7 +90,7 @@
"shelljs": "0.10.0",
"shx": "^0.4.0",
"style-to-object": "^1.0.9",
"tabulator-tables": "^4.9.3",
"tabulator-tables": "^6.3.1",
"typescript": "^4.9.5",
"unified": "^11.0.5",
"unist-util-visit": "^5.0.0"
Expand Down
42 changes: 17 additions & 25 deletions src/components/table/columns.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { Column, ColumnSorter, ColumnAggregatorFunction } from './table.types';
import Tabulator from 'tabulator-tables';
import {
CellComponent,
ColumnCalc,
ColumnComponent,
ColumnDefinition,
Formatter,
SorterFromTable,
} from 'tabulator-tables';
import { escape } from 'html-escaper';
import { ElementPool } from './element-pool';
import { pickBy, negate } from 'lodash-es';
Expand All @@ -15,8 +22,8 @@ export class ColumnDefinitionFactory {
* @param column - config describing the column
* @returns Tabulator column
*/
public create(column: Column<object>): Tabulator.ColumnDefinition {
const definition: Tabulator.ColumnDefinition = {
public create(column: Column<object>): ColumnDefinition {
const definition: ColumnDefinition = {
title: column.title,
field: column.field,
hozAlign: column.horizontalAlign,
Expand Down Expand Up @@ -82,10 +89,7 @@ export const formatHeader = (column: Column) => (): string | HTMLElement => {
* @param pool - pool to get custom components from
* @returns Tabulator formatter
*/
export function createFormatter(
column: Column,
pool: ElementPool
): Tabulator.Formatter {
export function createFormatter(column: Column, pool: ElementPool): Formatter {
if (!column.component?.name) {
return formatCell;
}
Expand All @@ -100,7 +104,7 @@ export function createFormatter(
return formatCell;
}

return (cell: Tabulator.CellComponent) => {
return (cell: CellComponent) => {
const value = formatCell(cell, column);

return createCustomComponent(cell, column, value, pool);
Expand All @@ -126,10 +130,7 @@ function columnElementExists(column: Column<any>) {
* @param column - configuration for the current column
* @returns the formatted value
*/
export function formatCell(
cell: Tabulator.CellComponent,
column: Column
): string {
export function formatCell(cell: CellComponent, column: Column): string {
const data = cell.getData();
let value = cell.getValue();

Expand All @@ -154,7 +155,7 @@ export function formatCell(
* @returns custom component that renders a value in the table
*/
export function createCustomComponent(
cell: Tabulator.CellComponent,
cell: CellComponent,
column: Column,
value: string,
pool: ElementPool
Expand Down Expand Up @@ -233,10 +234,7 @@ function getEventName(eventListener: string): string {
return eventListener.charAt(2).toLowerCase() + eventListener.slice(3);
}

function createResizeObserver(
element: HTMLElement,
column: Tabulator.ColumnComponent
) {
function createResizeObserver(element: HTMLElement, column: ColumnComponent) {
if (!('ResizeObserver' in window)) {
return;
}
Expand All @@ -263,12 +261,6 @@ function createResizeObserver(
}, RESIZE_TIMEOUT);
}

// Tabulator seems to also have this `field` property, that does not appear on
// the interface for some reason
interface TabulatorSorter extends Tabulator.Sorter {
field: string;
}

/**
* Create a column sorter from a tabulator sorter
*
Expand All @@ -277,7 +269,7 @@ interface TabulatorSorter extends Tabulator.Sorter {
*/
export const createColumnSorter =
(columns: Column[]) =>
(sorter: TabulatorSorter): ColumnSorter => {
(sorter: SorterFromTable): ColumnSorter => {
const column = columns.find((col) => col.field === sorter.field);
const direction = sorter.dir.toUpperCase() as 'ASC' | 'DESC';

Expand All @@ -291,7 +283,7 @@ export const createColumnSorter =
*
* @param column
*/
export function getColumnAggregator(column: Column): Tabulator.ColumnCalc {
export function getColumnAggregator(column: Column): ColumnCalc {
const aggregator = column.aggregator;
if (isAggregatorFunction(aggregator)) {
return (values: any[], data: object[]) => {
Expand Down
76 changes: 76 additions & 0 deletions src/components/table/examples/table-pagination.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { Component, h, Host, State } from '@stencil/core';
import {
Column,
Option,
LimelSelectCustomEvent,
} from '@limetech/lime-elements';
import { data, Bird } from './birds';
import { capitalize } from 'lodash-es';

/**
* Pagination
* By specifying a `pageSize`, you can enable pagination for the table.
*
* Additionally, you can control the location of the pagination controls
* by setting the `paginationLocation` property to either `top` or `bottom`.
*
* @sourceFile birds.ts
*/
@Component({
tag: 'limel-example-table-pagination',
styleUrl: 'table.scss',
shadow: true,
})
export class TablePaginationExample {
@State()
private columns: Array<Column<Bird>> = [

Check warning on line 26 in src/components/table/examples/table-pagination.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Member 'columns' is never reassigned; mark it as `readonly`.

See more on https://sonarcloud.io/project/issues?id=Lundalogik_lime-elements&issues=AZr-mQJe2zwRe71M66V7&open=AZr-mQJe2zwRe71M66V7&pullRequest=3478
{ title: 'Name', field: 'name' },
{ title: 'Binominal name', field: 'binominalName' },
{ title: 'Nest type', field: 'nest', formatter: capitalize },
{ title: 'Eggs per clutch', field: 'eggs', horizontalAlign: 'right' },
{ title: 'Origin', field: 'origin' },
];

@State()
private paginationLocation: 'top' | 'bottom' = 'bottom';

private readonly paginationLocationOptions: Option[] = [
{ text: 'Top', value: 'top' },
{ text: 'Bottom', value: 'bottom' },
];

private readonly pageSize = 5;

render() {
return (
<Host>
<limel-table
data={data}
columns={this.columns}
pageSize={this.pageSize}
paginationLocation={this.paginationLocation}
/>
<limel-example-controls>
<limel-select
label="Pagination location"
value={this.getSelectedPaginationLocation()}
options={this.paginationLocationOptions}
onChange={this.handlePaginationLocationChange}
/>
</limel-example-controls>
</Host>
);
}

private readonly getSelectedPaginationLocation = (): Option => {
return this.paginationLocationOptions.find(
(option) => option.value === this.paginationLocation
);
};

private readonly handlePaginationLocationChange = (
event: LimelSelectCustomEvent<Option>
) => {
this.paginationLocation = event.detail.value as 'top' | 'bottom';
};
}
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
flex-shrink: 0;
}

.tabulator-tableHolder {
.tabulator-tableholder {
isolation: isolate;
flex-grow: 1;
$unset-tabulators-calculated-and-hardcoded-height: unset !important; // tabulator calculates (not so precisely) height of the scrollable area of the table and adds it inline.
Expand Down
6 changes: 4 additions & 2 deletions src/components/table/partial-styles/_tabulator-footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@
transition:
transform 0.5s ease-out,
opacity 0.35s ease; //For some reason the footer is not animated when it gets hidden/removed
padding-top: 0;
padding-bottom: 0;
color: var(--table-text-color);
background-color: rgb(var(--table-header-background-color--hover));
border: none;
user-select: auto;

.tabulator-footer-contents {
padding: 0 0.25rem;
}

.tabulator-calcs-holder {
border-color: rgb(var(--contrast-500));
background: rgb(var(--contrast-500)) !important;
Expand Down
Loading
Loading