Table with sorting, searching, selecting capabilities
Anna | 3/4/1970 | Analyst | |
Bernard | 5/8/1980 | Bookkeeper | |
Claire | 7/12/1972 | CEO | |
Daniel | 3/24/1946 | Developer | |
Emma | 8/1/1947 | Economist | |
Frank | 12/14/1978 | Freelancer | |
Gwyneth | 2/4/1992 | Geographer | |
Howard | 10/19/2001 | HR head | |
Iva | 7/12/1925 | Investor | |
John | 4/2/1994 | Journalist |
6 element valgt
Viser 1-10 av 25 element
<TableSorter
items={[
{ key: '01', name: 'Anna', date: new Date(1970, 2, 4), type: 'Analyst' , selected: true },
{ key: '02', name: 'Bernard', date: new Date(1980, 4, 8), type: 'Bookkeeper', disabled: true },
{ key: '03', name: 'Claire', date: new Date(1972, 6, 12), type: 'CEO' },
{ key: '03', hasSubrows: true, openSubrows: false, name: 'Claire', date: new Date(1972, 6, 12), type: 'CEO' },
{ key: '03_01', parentKey: '03', name: 'Charles', date: new Date(1970, 2, 4), type: 'co-CEO', selected: true },
{ key: '03_02', parentKey: '03', name: 'Chad', date: new Date(1970, 2, 4), type: 'co-CEO', selected: false },
{ key: '03_03', parentKey: '03', name: 'Christine', date: new Date(1970, 2, 4), type: 'co-CEO', selected: false },
{ key: '04', name: 'Daniel', date: new Date(1946, 2, 24), type: 'Developer' },
{ key: '05', name: 'Emma', date: new Date(1947, 7, 1), type: 'Economist' , selected: true },
{ key: '06', name: 'Frank', date: new Date(1978, 11, 14), type: 'Freelancer' },
{ key: '07', name: 'Gwyneth', date: new Date(1992, 1, 4), type: 'Geographer' },
{ key: '08', name: 'Howard', date: new Date(2001, 9, 19), type: 'HR head' , disabled: true },
{ key: '09', name: 'Iva', date: new Date(1925, 6, 12), type: 'Investor' , selected: true },
{ key: '10', name: 'John', date: new Date(1994, 3, 2), type: 'Journalist' },
{ key: '11', name: 'Karen', date: new Date(1999, 9, 22), type: 'Knowledge engineer' },
{ key: '12', name: 'Leonard', date: new Date(1991, 10, 26), type: 'Lawyer' },
{ key: '13', name: 'Mary', date: new Date(1962, 10, 25), type: 'Marketing' },
{ key: '14', name: 'Neville', date: new Date(1983, 1, 22), type: 'Nurse' },
{ key: '15', name: 'Olivia', date: new Date(1992, 7, 2), type: 'Operations manager' , selected: true },
{ key: '16', name: 'Peter', date: new Date(1927, 6, 13), type: 'Project manager' },
{ key: '17', name: 'Quincey', date: new Date(1965, 3, 11), type: 'Quality control' },
{ key: '18', name: 'Ronald', date: new Date(1982, 8, 18), type: 'Realtor' , disabled: true },
{ key: '19', name: 'Sally', date: new Date(1942, 8, 20), type: 'Sales manager' },
{ key: '20', name: 'Ted', date: new Date(1968, 3, 22), type: 'Tester' },
{ key: '21', name: 'Uma', date: new Date(1985, 9, 17), type: 'UI expert' , selected: true },
{ key: '22', name: 'Victor', date: new Date(2012, 12, 13), type: 'Video editor' },
{ key: '23', name: 'Wanda', date: new Date(1947, 2, 2), type: 'Web designer', disabled: true },
{ key: '24', name: 'Xavier', date: new Date(1932, 7, 5), type: 'XML developer' },
{ key: '25', name: 'Yvonne', date: new Date(1993, 2, 28), type: 'Yoga instructor' },
{ key: '26', name: 'Ziggy', date: new Date(1929, 1, 14), type: 'Zoo keeper' }
]}
itemsPerPage={ 10 }
loading={ false }
animatable={ true }
searchable={ true }
selectable={ true }
sortable={ true }
striped={ true }
summary={ true }
compact={ false }
sort=
columns={[
{id: 'name', label: 'Name', type: 'string', filterText: '' },
{id: 'date', label: 'Date', type: 'date', filterText: '' },
{id: 'type', label: 'Occupation', type: 'string', filterText: '',
renderCell: (item, value) => <EtikettLiten>{value}</EtikettLiten>
}
]}/>import TableSorter from 'tabell'| Property | Type | Required | Description | Default |
|---|---|---|---|---|
| animatable | boolean | false | Animate rows | true |
| className | string | false | Additional classnames | - |
| compact | boolean | false | Boolean for less padding on the cells (from 1rem to 0.35rem). | - |
| context | object | false | Optional context params to be passed when adding callback functions to cell elements | - |
| columns | array | false | List with column data. Elements should be objects with keys id, label, type, filterText, defaulsSortOrder | [] |
| highContrast | boolean | false | High contrast mode. | false |
| items | array | false | List with row data. List elements should be objects where keys match a given column id. | [] |
| itemsPerPage | number | false | If pagination is true, sets the number of items per page. | 10 |
| initialPage | number | false | If pagination is true, set the initial page to be seen (default is 1) | 1 |
| labels | object | false | Translation object with labels, if you want to override the default labels. | |
| loading | boolean | false | Loading spinner, useful for lazy data fetch. | false |
| onColumnSort | function | false | Callback function after sorting column is performed | - |
| onRowSelectChange | function | false | Callback function when selection mode of at least one row changes. The table items are returned as param | - |
| pagination | boolean | false | Turns pagination on the table, to keep big tables in a manageable size. | true |
| searchable | boolean | false | Adds a search icon that allows row search fields to show | true |
| selectable | boolean | false | Renders a first column with checkboxes that trigger the onRowSelectChange callback function | false |
| sortable | boolean | false | Allow sortable table headers | true |
| sort | object | false | Initial sorting information. | { column: '', order: '' } |
| striped | boolean | false | Use striped rows | true |
| summary | boolean | false | Displays a total selected elements and extended pagination info, if true | false |