radar-azdelta / svelte-datatable Goto Github PK

If the text takes to much space make that ... apears instead
(Fade out)
(Pop up )

Create a class for the following current methods:

• loadStoredOptions
• onStoreOptions

Make it generic so that other authenticators can be implemented with the same logic

Als basis structuur had ik dit in gedachten:

enum SortDirection {
    Up = 1,
    Down = 2
}

interface IColumnFilter {
    column: string,
    filter?: string | RegExp  //if the value is undefined, we need to clear the filter. 
}

interface IColumnSort {
    column: string,
    sortDirection?: SortDirection  //if the value is undefined, we need to remove the sorting. 
}

interface ITablePagination {
    currentPage: number,
    totalPages: number,
    rowsPerPage: number
}

interface ITableData {
    columns?: string[]
    data?: any[][] // an array (the rows), of array values (the columns per row)
}

interface ITable {
    //GUI invoked methods
    applyColumnFilter(columnFilter: IColumnFilter): void;
    applyColumnSort(columnSort: IColumnSort): void;
    applyTablePagination(tablePagination: ITablePagination): void;

    //data methods
    fetchData(columnFilters?: IColumnFilter[], columnSorts?: IColumnSort[], tablePagination?: ITablePagination[]): Promise<ITableData>; //async function !!!!!!!

    //render methods
    renderTable(tableData: ITableData): void;
}

see ColumnResize.svelte

using pointermove-pointerup or mousemove-mouseup/down events or the dragstart-dragmove event

you will need to calculate the width of each column (if not set by the columns property)

the resize can not be larger than the width to the columns next to it!

see example

see ColumnResize.svelte

use drag and drop to reorder (change the position of) the columns

this id can than be used to store the columns metadata (sort order, filters, width, visability, ...) in the session storage of the browser using the Snapshot functionality

• Going to last page & then opening other file and checking if you're directed to the same page while it does not exist?
• Insert file and then delete a column in that file and insert it again?

example:
https://github.com/RADar-AZDelta/Rabbit-in-a-Blender/blob/main/src/riab/cli.py#L1
and
https://github.com/RADar-AZDelta/Rabbit-in-a-Blender/blob/main/LICENSE

cfr vitejs/vite#4586

already tried: sveltejs/kit#9528

const DataTableWorker = await import('$lib/workers/DataTable.worker?worker')
this.worker = new DataTableWorker.default()

//can also be written as 

import workerUrl from '$lib/workers/DataTable.worker?url';
this.worker = new Worker(workerUrl, { type: 'module' });

to replace the inefficient code: https://github.com/RADar-AZDelta/RADar-DataTable/blob/pjl/src/lib/components/DataTable.svelte#L337

cfr https://github.com/muonw/muonw-powertable/blob/main/app/src/lib/components/PowerTable.svelte#L1245

Can't resize past table 100%
Can't resize min width

add data attributes to the data table

data-status (is the table loading or not)
data-name
data-type
data-column or data-key (column id)
data-sortable
data-filterable
data-resizable
data-direction (sort direction)
data-index
...

see https://github.com/muonw/muonw-powertable/blob/main/app/src/lib/components/PowerTable.svelte#L1137

cleanup and modify the contents of the Readme.md

ex: DataTableSkeleton.svelte

https://pnpm.io/

pas ook je documentatie aan.