<script>
import ExtendedTable from "extended-table";
let rows = [
{ startnumber: {number: 1}},
{ startnumber: {number: 2}},
{ startnumber: {number: 3}},
{ startnumber: {number: 4}},
];
let columnDefinition = [
{
title: 'Start­number',
propertyPath: 'startnumber.number'
},
];
</script>
<ExtendedTable columns={columnDefinition} data={rows}>
</ExtendedTable>Have a look at the examples folder.
To make a column sortable, set sortable: true in the column definition. The
column needs to have a property path set to make sorting work.
Initial sorting could be controlled via the props initialSortBy and
initialSortDirection, where initialSortBy is a property path (string).
In case you want to allow sorting only one column, you need to set
multisort={false}.
The easiest way to render a column is to provide a propertyPath. This could
even be in a nested Object. Have a look at deep-value
to see more ways how to express paths.
To render slightly more complex data you could specify value, that needs to
be a function:
value: (rowData, rowIndex, columnIndex) => `Place ${rowIndex + 1}: ${rowData.name}`If this is not enough, you could render columns as slots. You could currently
specify no more than 20 slots due to a limitation in Svelte. All slots are
named column-X, X being the number:
<ExtendedTable columns={columnDefinition} data={rows}>
<div slot="column-1" let:data={person} let:rowIndex={index}>
<Person person="{person}" on:edited={event => setValue(event.detail, index)}></Person>
</div>
</ExtendedTable>Of course, all three ways can be combined per Table. On a column level you have to decide on one way.
Have a look at the theming example where this is explained.
To specify what happens when you click on a Row, you could set the onRowClick
property. This should be a callback function.
For controlling what happens if you click a table cell, you could add a clickHandler
on the column definition.
If you have very large columns, you can render them as collapsible by setting
collapsed: false on the column definition.
When autoCollapse={true} is set, all Columns that are outside of the screen
are collapsed automatically. You still could collapse other columns manually,
if you want.
Just set the stickyHeaders={true} prop, and you are ready. Please note, that
specifying an overflow on a parent element will break the stickyness.
Additionally, you could define an offset, if you use fixed elements above (like
a navigation header). Set stickyOffset="100px".
This component aims for comfort more than for performance. So if you want to display thousands of rows, you may run into performance issues.
This could be done, if you fill the slot additionalRow. You'll get the data
as rowData. Example:
<tr slot="additionalRow" let:rowData={crew} class="keep-together">
<td colspan="7">
<MyOtherComponent myProp={crew} />
</td>
</tr>If you set expandAll={true}, all collapsed columns will expand at once.
IMHO, putting a pagination into this component would be too much. This should be done from outside.
Like pagination this should be done from the outside. So its up to you to add a filter.
To use your own sorting function, you can set sortingFunction={yourSortFunction}
property. This function gets called when you click on a header column. Parameters
are:
column(Object) - the current column that was clicked oncolumns(array) - All columnsdata(array) - The rowsmultisort(boolean) -true, if sorting for multiple columns is enabledclearCacheCallback(function) - Callback to clear the caches
Currently there are three dependencies:
- fast-sort for sorting
- deep-value for propertyPath resolution
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent