Skip to content

Commit

Permalink
Merge 8032b2f into d941454
Browse files Browse the repository at this point in the history
  • Loading branch information
@blerrgh
blerrgh committed Jan 10, 2023
2 parents d941454 + 8032b2f commit a18b63e
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 46 deletions.
24 changes: 12 additions & 12 deletions package-lock.json
View file

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

17 changes: 13 additions & 4 deletions src/lib/plugins/addColumnFilters.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import { derived, writable, type Readable, type Writable } from 'svelte/store';
import type { PluginInitTableState } from '../createViewModel';
import type { DataBodyCell } from '../bodyCells';

export interface ColumnFiltersConfig {
serverSide?: boolean;
}

export interface ColumnFiltersState<Item> {
filterValues: Writable<Record<string, unknown>>;
preFilteredRows: Readable<BodyRow<Item>[]>;
Expand Down Expand Up @@ -89,7 +93,7 @@ const getFilteredRows = <Item, Row extends BodyRow<Item>>(
};

export const addColumnFilters =
<Item>(): TablePlugin<
<Item>({ serverSide = false }: ColumnFiltersConfig = {}): TablePlugin<
Item,
ColumnFiltersState<Item>,
ColumnFiltersColumnOptions<Item>,
Expand All @@ -105,9 +109,14 @@ export const addColumnFilters =
const deriveRows: DeriveRowsFn<Item> = (rows) => {
return derived([rows, filterValues], ([$rows, $filterValues]) => {
preFilteredRows.set($rows);
const _filteredRows = getFilteredRows($rows, $filterValues, columnOptions);
filteredRows.set(_filteredRows);
return _filteredRows;
if (!serverSide) {
const _filteredRows = getFilteredRows($rows, $filterValues, columnOptions);
filteredRows.set(_filteredRows);
return _filteredRows;
} else {
filteredRows.set($rows);
return $rows;
}
});
};

Expand Down
62 changes: 46 additions & 16 deletions src/lib/plugins/addPagination.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,26 @@ import { derived, writable, type Readable, type Updater, type Writable } from 's
export interface PaginationConfig {
initialPageIndex?: number;
initialPageSize?: number;
serverSide?: boolean;
}

export interface PaginationState {
pageSize: Writable<number>;
pageIndex: Writable<number>;
pageCount: Readable<number>;
serverItemsCount: Writable<number>;
hasPreviousPage: Readable<boolean>;
hasNextPage: Readable<boolean>;
}

const MIN_PAGE_SIZE = 1;

export const createPageStore = ({ items, initialPageSize, initialPageIndex }: PageStoreConfig) => {
export const createPageStore = ({
items,
initialPageSize,
initialPageIndex,
serverSide,
}: PageStoreConfig) => {
const pageSize = writable(initialPageSize);
const updatePageSize = (fn: Updater<number>) => {
pageSize.update(($pageSize) => {
Expand All @@ -27,18 +34,27 @@ export const createPageStore = ({ items, initialPageSize, initialPageIndex }: Pa
};
const setPageSize = (newPageSize: number) => updatePageSize(() => newPageSize);

const pageCount = derived([pageSize, items], ([$pageSize, $items]) => {
const $pageCount = Math.ceil($items.length / $pageSize);
const pageIndex = writable(initialPageIndex);

function calcPageCountAndLimitIndex([$pageSize, $itemsCount]: [$pageSize: number, $itemsCount: number]) {
const $pageCount = Math.ceil($itemsCount / $pageSize);
pageIndex.update(($pageIndex) => {
if ($pageCount > 0 && $pageIndex >= $pageCount) {
return $pageCount - 1;
}
return $pageIndex;
});
return $pageCount;
});
}

const pageIndex = writable(initialPageIndex);
const serverItemsCount = writable(0);
let pageCount;
if (serverSide) {
pageCount = derived([pageSize, serverItemsCount], calcPageCountAndLimitIndex);
} else {
const itemCount = derived(items, ($items) => $items.length);
pageCount = derived([pageSize, itemCount], calcPageCountAndLimitIndex);
}

const hasPreviousPage = derived(pageIndex, ($pageIndex) => {
return $pageIndex > 0;
Expand All @@ -53,8 +69,9 @@ export const createPageStore = ({ items, initialPageSize, initialPageIndex }: Pa
update: updatePageSize,
set: setPageSize,
},
pageCount,
pageIndex,
pageCount,
serverItemsCount,
hasPreviousPage,
hasNextPage,
};
Expand All @@ -64,10 +81,15 @@ export interface PageStoreConfig {
items: Readable<unknown[]>;
initialPageSize?: number;
initialPageIndex?: number;
serverSide?: boolean;
}

export const addPagination =
<Item>({ initialPageIndex = 0, initialPageSize = 10 }: PaginationConfig = {}): TablePlugin<
<Item>({
initialPageIndex = 0,
initialPageSize = 10,
serverSide = false,
}: PaginationConfig = {}): TablePlugin<
Item,
PaginationState,
Record<string, never>,
Expand All @@ -76,26 +98,34 @@ export const addPagination =
() => {
const prePaginatedRows = writable<BodyRow<Item>[]>([]);
const paginatedRows = writable<BodyRow<Item>[]>([]);
const { pageSize, pageCount, pageIndex, hasPreviousPage, hasNextPage } = createPageStore({
items: prePaginatedRows,
initialPageIndex,
initialPageSize,
});
const { pageSize, pageIndex, pageCount, serverItemsCount, hasPreviousPage, hasNextPage } =
createPageStore({
items: prePaginatedRows,
initialPageIndex,
initialPageSize,
serverSide,
});
const pluginState: PaginationState = {
pageSize,
pageIndex,
pageCount,
serverItemsCount,
hasPreviousPage,
hasNextPage,
};

const derivePageRows: DeriveRowsFn<Item> = (rows) => {
return derived([rows, pageSize, pageIndex], ([$rows, $pageSize, $pageIndex]) => {
prePaginatedRows.set($rows);
const startIdx = $pageIndex * $pageSize;
const _paginatedRows = $rows.slice(startIdx, startIdx + $pageSize);
paginatedRows.set(_paginatedRows);
return _paginatedRows;
if (!serverSide) {
const startIdx = $pageIndex * $pageSize;
const _paginatedRows = $rows.slice(startIdx, startIdx + $pageSize);
paginatedRows.set(_paginatedRows);
return _paginatedRows;
} else {
paginatedRows.set($rows);
return $rows;
}
});
};

Expand Down
15 changes: 7 additions & 8 deletions src/lib/plugins/addSortBy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface SortByConfig {
disableMultiSort?: boolean;
isMultiSortEvent?: (event: Event) => boolean;
toggleOrder?: ('asc' | 'desc' | undefined)[];
serverSide?: boolean;
}

const DEFAULT_TOGGLE_ORDER: ('asc' | 'desc' | undefined)[] = ['asc', 'desc', undefined];
Expand Down Expand Up @@ -168,6 +169,7 @@ export const addSortBy =
disableMultiSort = false,
isMultiSortEvent = isShiftClick,
toggleOrder,
serverSide = false,
}: SortByConfig = {}): TablePlugin<Item, SortByState<Item>, SortByColumnOptions, SortByPropSet> =>
({ columnOptions }) => {
const disabledSortIds = Object.entries(columnOptions)
Expand All @@ -176,18 +178,15 @@ export const addSortBy =

const sortKeys = createSortKeysStore(initialSortKeys);
const preSortedRows = writable<BodyRow<Item>[]>([]);
const sortedRows = writable<BodyRow<Item>[]>([]);

const deriveRows: DeriveRowsFn<Item> = (rows) => {
return derived([rows, sortKeys], ([$rows, $sortKeys]) => {
preSortedRows.set($rows);
const _sortedRows = getSortedRows<Item, typeof $rows[number]>(
$rows,
$sortKeys,
columnOptions
);
sortedRows.set(_sortedRows);
return _sortedRows;
if (serverSide) {
return getSortedRows<Item, typeof $rows[number]>($rows, $sortKeys, columnOptions);
} else {
return $rows;
}
});
};

Expand Down
10 changes: 7 additions & 3 deletions src/lib/plugins/addTableFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface TableFilterConfig {
fn?: TableFilterFn;
initialFilterValue?: string;
includeHiddenColumns?: boolean;
serverSide?: boolean;
}

export interface TableFilterState<Item> {
Expand Down Expand Up @@ -106,6 +107,7 @@ export const addTableFilter =
fn = textPrefixFilter,
initialFilterValue = '',
includeHiddenColumns = false,
serverSide = false,
}: TableFilterConfig = {}): TablePlugin<
Item,
TableFilterState<Item>,
Expand All @@ -115,7 +117,6 @@ export const addTableFilter =
({ columnOptions }) => {
const filterValue = writable(initialFilterValue);
const preFilteredRows = writable<BodyRow<Item>[]>([]);
const filteredRows = writable<BodyRow<Item>[]>([]);
const tableCellMatches = recordSetStore();

const pluginState: TableFilterState<Item> = { filterValue, preFilteredRows };
Expand All @@ -131,8 +132,11 @@ export const addTableFilter =
includeHiddenColumns,
});
tableCellMatches.set($tableCellMatches);
filteredRows.set($filteredRows);
return $filteredRows;
if (serverSide) {
return $rows;
} else {
return $filteredRows;
}
});
};

Expand Down
18 changes: 15 additions & 3 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,25 @@
const data = readable(createSamples(2, 2));
let serverSide = false;
const table = createTable(data, {
subRows: addSubRows({
children: 'children',
}),
filter: addColumnFilters(),
filter: addColumnFilters({
serverSide: serverSide,
}),
tableFilter: addTableFilter({
includeHiddenColumns: true,
serverSide: serverSide,
}),
group: addGroupBy({
initialGroupByIds: [],
}),
sort: addSortBy({
toggleOrder: ['asc', 'desc'],
serverSide: serverSide,
}),
expand: addExpandedRows({
initialExpandedIds: { 1: true },
Expand All @@ -57,6 +63,7 @@
hideColumns: addHiddenColumns(),
page: addPagination({
initialPageSize: 20,
serverSide: serverSide,
}),
resize: addResizedColumns(),
export: addDataExport(),
Expand Down Expand Up @@ -258,7 +265,8 @@
const { filterValues } = pluginStates.filter;
const { filterValue } = pluginStates.tableFilter;
const { selectedDataIds } = pluginStates.select;
const { pageIndex, pageCount, pageSize, hasPreviousPage, hasNextPage } = pluginStates.page;
const { pageIndex, pageCount, pageSize, hasPreviousPage, hasNextPage, serverItemCount } =
pluginStates.page;
const { expandedIds } = pluginStates.expand;
const { columnIdOrder } = pluginStates.orderColumns;
// $: $columnIdOrder = ['expanded', ...$groupByIds];
Expand All @@ -268,6 +276,8 @@
const { exportedData } = pluginStates.export;
const { exportedData: exportedJson } = pluginStates.exportJson;
const { exportedData: exportedCsv } = pluginStates.exportCsv;
$serverItemCount = 6;
</script>

<h1>svelte-headless-table</h1>
Expand Down Expand Up @@ -364,6 +374,7 @@
groupByIds: $groupByIds,
sortKeys: $sortKeys,
filterValues: $filterValues,
filterValue: $filterValue,
selectedDataIds: $selectedDataIds,
columnIdOrder: $columnIdOrder,
hiddenColumnIds: $hiddenColumnIds,
Expand All @@ -372,7 +383,8 @@
},
null,
2
)}</pre>
)}
serverSide: {serverSide}</pre>

<style>
* {
Expand Down

0 comments on commit a18b63e

Please sign in to comment.