Asynchronous Datatable
The Asynchronous Datatable component is designed to streamline the process of rendering HTML tables in your web applications. This datatable component offers a rich set of features to enhance the presentation and interactivity of your data.
Basic Usage
The asynchronous datatable has some required props that must be passed to generate the basic datatable. Here is a sample example:
| Name | Position | Age | Start Date | Salary |
|---|---|---|---|---|
| Humfrey Scain | Construction Foreman | 40 | 08/10/2023 | 150,000 |
| Jeane Sherland | Electrician | 38 | 12/12/2023 | 140,000 |
| Merrie Van Son | Construction Worker | 37 | 30/06/2023 | 110,000 |
| Myrtia Fitchell | Project Manager | 35 | 09/04/2024 | 110,000 |
| Betty Giannotti | Construction Worker | 30 | 10/02/2024 | 140,000 |
| Alfy Kirimaa | Estimator | 27 | 05/08/2023 | 95,000 |
| Arte Gledhall | Construction Manager | 28 | 23/04/2023 | 90,000 |
| Ardene Beckensall | Supervisor | 26 | 07/08/2023 | 100,000 |
| Allsun Johnstone | Project Manager | 29 | 15/07/2023 | 80,000 |
| Leigha Tattersill | Estimator | 29 | 02/06/2023 | 80,000 |
Bordered Table
Async Datatable has border support. It has two seperate props for handling horizontal border and vertical border. If you pass horizontalBorder or verticalBorder then you can see the respective borders accordingly.
| Name | Position | Age | Start Date | Salary |
|---|---|---|---|---|
| Humfrey Scain | Construction Foreman | 40 | 08/10/2023 | 150,000 |
| Jeane Sherland | Electrician | 38 | 12/12/2023 | 140,000 |
| Merrie Van Son | Construction Worker | 37 | 30/06/2023 | 110,000 |
| Myrtia Fitchell | Project Manager | 35 | 09/04/2024 | 110,000 |
| Betty Giannotti | Construction Worker | 30 | 10/02/2024 | 140,000 |
| Alfy Kirimaa | Estimator | 27 | 05/08/2023 | 95,000 |
| Arte Gledhall | Construction Manager | 28 | 23/04/2023 | 90,000 |
| Ardene Beckensall | Supervisor | 26 | 07/08/2023 | 100,000 |
| Allsun Johnstone | Project Manager | 29 | 15/07/2023 | 80,000 |
| Leigha Tattersill | Estimator | 29 | 02/06/2023 | 80,000 |
Stripped Table
The stripped feature of our Async DataTable component allows you to enhance the visual clarity of your tables by alternating the background color of rows, creating a stripped effect. This can improve readability, especially when dealing with large datasets. You can override the default stripe color by passing a color code through stripeColor prop
| Name | Position | Age | Start Date | Salary |
|---|---|---|---|---|
| Humfrey Scain | Construction Foreman | 40 | 08/10/2023 | 150,000 |
| Jeane Sherland | Electrician | 38 | 12/12/2023 | 140,000 |
| Merrie Van Son | Construction Worker | 37 | 30/06/2023 | 110,000 |
| Myrtia Fitchell | Project Manager | 35 | 09/04/2024 | 110,000 |
| Betty Giannotti | Construction Worker | 30 | 10/02/2024 | 140,000 |
| Alfy Kirimaa | Estimator | 27 | 05/08/2023 | 95,000 |
| Arte Gledhall | Construction Manager | 28 | 23/04/2023 | 90,000 |
| Ardene Beckensall | Supervisor | 26 | 07/08/2023 | 100,000 |
| Allsun Johnstone | Project Manager | 29 | 15/07/2023 | 80,000 |
| Leigha Tattersill | Estimator | 29 | 02/06/2023 | 80,000 |
Table with Entries Component
The Entries component within the Async Datatable provides users with how many rows are being displayed in the table. It is mandatory to pass the callback function handleNoOfEntriesChange to render this component. There are some optional props that can be passed for customizing this component. For Example: entriesHeader, defaultEntries, entriesArray
| Name | Position | Age | Start Date | Salary |
|---|---|---|---|---|
| Humfrey Scain | Construction Foreman | 40 | 08/10/2023 | 150,000 |
| Jeane Sherland | Electrician | 38 | 12/12/2023 | 140,000 |
| Merrie Van Son | Construction Worker | 37 | 30/06/2023 | 110,000 |
| Myrtia Fitchell | Project Manager | 35 | 09/04/2024 | 110,000 |
| Betty Giannotti | Construction Worker | 30 | 10/02/2024 | 140,000 |
| Alfy Kirimaa | Estimator | 27 | 05/08/2023 | 95,000 |
| Arte Gledhall | Construction Manager | 28 | 23/04/2023 | 90,000 |
| Ardene Beckensall | Supervisor | 26 | 07/08/2023 | 100,000 |
| Allsun Johnstone | Project Manager | 29 | 15/07/2023 | 80,000 |
| Leigha Tattersill | Estimator | 29 | 02/06/2023 | 80,000 |
Table with Pagination Component
The Pagination component enhances the usability of the async datatable by providing intuitive navigation controls for browsing through multiple pages of data. It allows users to efficiently navigate large datasets, improving overall user experience and interaction with the datatable.
The Pagination component is seamlessly integrated into the async datatable, automatically rendering when the totalPages, currentPage and handlePageChange props are provided. It requires no additional configuration, offering a hassle-free solution for managing paginated data.
Additionally, if you want to show the info of how many data are showing currently, then you have to pass noOfEntries and totalRecord props.
| Name | Position | Age | Start Date | Salary |
|---|---|---|---|---|
| Humfrey Scain | Construction Foreman | 40 | 08/10/2023 | 150,000 |
| Jeane Sherland | Electrician | 38 | 12/12/2023 | 140,000 |
| Merrie Van Son | Construction Worker | 37 | 30/06/2023 | 110,000 |
| Myrtia Fitchell | Project Manager | 35 | 09/04/2024 | 110,000 |
| Betty Giannotti | Construction Worker | 30 | 10/02/2024 | 140,000 |
| Alfy Kirimaa | Estimator | 27 | 05/08/2023 | 95,000 |
| Arte Gledhall | Construction Manager | 28 | 23/04/2023 | 90,000 |
| Ardene Beckensall | Supervisor | 26 | 07/08/2023 | 100,000 |
| Allsun Johnstone | Project Manager | 29 | 15/07/2023 | 80,000 |
| Leigha Tattersill | Estimator | 29 | 02/06/2023 | 80,000 |
Overflow Scroll Behavior
The Async Datatable component supports customizable overflow scroll behavior, allowing developers to specify the desired width and height using an object format {x: number, y: number}. This feature sets a width and height that is specified and add a scroller to view overflowed data in the datatable which enhances user experience and navigation within large datasets.
| Name | Position | Age | Start Date | Salary |
|---|---|---|---|---|
| Humfrey Scain | Construction Foreman | 40 | 08/10/2023 | 150,000 |
| Jeane Sherland | Electrician | 38 | 12/12/2023 | 140,000 |
| Merrie Van Son | Construction Worker | 37 | 30/06/2023 | 110,000 |
| Myrtia Fitchell | Project Manager | 35 | 09/04/2024 | 110,000 |
| Betty Giannotti | Construction Worker | 30 | 10/02/2024 | 140,000 |
| Alfy Kirimaa | Estimator | 27 | 05/08/2023 | 95,000 |
| Arte Gledhall | Construction Manager | 28 | 23/04/2023 | 90,000 |
| Ardene Beckensall | Supervisor | 26 | 07/08/2023 | 100,000 |
| Allsun Johnstone | Project Manager | 29 | 15/07/2023 | 80,000 |
| Leigha Tattersill | Estimator | 29 | 02/06/2023 | 80,000 |
Row Selectable
Async Datatable component supports multiple selection of rows for doing any sort of actions afterwords. You have to pass isSelectableMulti, selectedRows and handleOnSelectChange props to enable this feature. Note that, here, isSelectableMulti is a boolean value, selectedRows expects an array and handleOnSelectChange is the callback function that returns the selectedRows array.
| Name | Position | Age | Start Date | Salary | |
|---|---|---|---|---|---|
| Humfrey Scain | Construction Foreman | 40 | 08/10/2023 | 150,000 | |
| Jeane Sherland | Electrician | 38 | 12/12/2023 | 140,000 | |
| Merrie Van Son | Construction Worker | 37 | 30/06/2023 | 110,000 | |
| Myrtia Fitchell | Project Manager | 35 | 09/04/2024 | 110,000 | |
| Betty Giannotti | Construction Worker | 30 | 10/02/2024 | 140,000 | |
| Alfy Kirimaa | Estimator | 27 | 05/08/2023 | 95,000 | |
| Arte Gledhall | Construction Manager | 28 | 23/04/2023 | 90,000 | |
| Ardene Beckensall | Supervisor | 26 | 07/08/2023 | 100,000 | |
| Allsun Johnstone | Project Manager | 29 | 15/07/2023 | 80,000 | |
| Leigha Tattersill | Estimator | 29 | 02/06/2023 | 80,000 |
Examples
Example 1
| Name | Position | Office | Age | Status | Start Date | Salary | Action | |
|---|---|---|---|---|---|---|---|---|
| Humfrey Scain | Construction Foreman | Micheng | 40 years | 08/10/2023 | 150,000 | |||
| Jeane Sherland | Electrician | Donskoye | 38 years | 12/12/2023 | 140,000 | |||
| Merrie Van Son | Construction Worker | Yanqul | 37 years | 30/06/2023 | 110,000 | |||
| Myrtia Fitchell | Project Manager | Mabuttal East | 35 years | 09/04/2024 | 110,000 | |||
| Betty Giannotti | Construction Worker | Hetang | 30 years | 10/02/2024 | 140,000 | |||
| Alfy Kirimaa | Estimator | Esquipulas | 27 years | 05/08/2023 | 95,000 | |||
| Arte Gledhall | Construction Manager | Yabrūd | 28 years | 23/04/2023 | 90,000 | |||
| Ardene Beckensall | Supervisor | Thị Trấn Thanh Lưu | 26 years | 07/08/2023 | 100,000 | |||
| Allsun Johnstone | Project Manager | Liujiage | 29 years | 15/07/2023 | 80,000 | |||
| Leigha Tattersill | Estimator | Libao | 29 years | 02/06/2023 | 80,000 |
API Reference
AsyncDatatable
| Attribute | Type | Description | Default |
|---|---|---|---|
| columnDefinitions | [] | Columns of table. | - |
| dataSource | [] | Array of objects. each object represents a table row. | - |
| horizontalBorder | boolean | If true then adds horizontal border in each row. | true |
| verticalBorder | boolean | If true then adds vertical border in each column. | true |
| stripped | boolean | Creates stripped effect in table rows. | true |
| stripeColor | string | To change the default stripe color. | #f3f4f6 |
| scroll | object | Whether the table can be scrollable. | - |
| fixedHeader | boolean | Set fixed header. | - |
| headerComponents | ReactNode | To render custom filter header components. | - |
| entriesHeader | string | To customize default entries lable. | "Items per page" |
| defaultEntries | number | To select default entry option. | 5 |
| entriesArray | [] | To customize no of entries options. | [5, 10, 20, 50, 100] |
| entriesDropdownPosition | topbottom | after clicking the dropdown, items will render in given location. | bottom |
| handleNoOfEntriesChange | function(value: number) | Triggered when a option is selected from entries dropdown. | - |
| totalPages | number | to pass total page number. | - |
| currentPage | number | to pass the current page value in pagination component. | - |
| noOfEntries | number | to define how many entries to show in per page. | 5 |
| totalRecord | number | to defines total number of data in a table. | - |
| entriesShowingSpaceText | string | to customize the string between how many data are showing in the table and total record. | "of" |
| handlePageChange | function(value: number) | Triggered when a option is selected from pagination page items. | - |
| dynamicPreviousText | string | For customizing previous btn label of pagination. | Previous |
| dynamicNextText | string | For customizing next btn label of pagination. | Next |
| previousIcon | ReactNode | For customizing previous btn icon. | |
| nextIcon | ReactNode | For customizing next btn icon. | |
| rtl | boolean | For rtl support in table. | false |
| isLoading | boolean | For showing a spinner when data is loading. | false |
| customLoadingComponent | ReactNode | For customizing loader when data is fetching. | |
| customEmptyDataComponent | ReactNode | For customizing design when there is no data in table. | |
| handleOnSort | function(headerName: string, sortOrder: "asc" | "desc") | Callback function for sorting in server side. Also need to pass isSortable props in column definition. | - |
| isSelectableMulti | boolean | Renders checkbox for selection before every row. | false |
| handleOnSelectChange | function(selectedRows: []) | Callback function that passes selected rows when select checkbox is clicked. | - |
| selectedRows | [] | To pass selected rows that are being passed by the callback function | - |
| styles | object | For customizing table styling. |
columnDefinitions
| Attribute | Type | Description | Default |
|---|---|---|---|
| title | string | Title of this column. | - |
| dataIndex | string | Key name of the data record. | - |
| align | startcenterend | To specify which way that column is aligned. | start |
| width | string | Width of this column. Takes both px or percentage value. | - |
| isSortable | boolean | For rendering the sortable icon. | - |
| render | function(value: unknown, record: unknown) | Renderer of the table cell. The return value should be a ReactNode. | - |
styles
| Attribute | Type | Description | Default |
|---|---|---|---|
| datatableFooterWrapperClassName | string | For customizing styles of datatable footer that contains entries and pagination. | - |
| paginationWrapperClassName | string | For customizing styles of pagination wrapper. | - |
| paginationNoOfEntriesWrapperClassName | string | For customizing styles of pagination no of entries wrapper. | - |
| paginationPrevBtnClassName | string | For customizing styles of pagination previous wrapper. | - |
| paginationNextBtnClassName | string | For customizing styles of pagination next wrapper. | - |
| paginationButtonClassName | string | For customizing styles of pagination all number buttons. | - |
| paginationButtonSelectedClassName | string | For customizing styles of pagination selected button. | - |
| headerWrapperClassName | string | For customizing styles of datatable table header wrapper. | - |
| headItemClassName | string | For customizing styles of datatable table head item. | - |
| headItemLabelClass | string | For customizing styles of datatable table head label. | - |
| tableBodyWrapperClassName | string | For customizing styles of datatable table body wrapper. | - |
| rowWrapperClassName | string | For customizing styles of datatable row wrapper. | - |
| rowItemClassName | string | For customizing styles of datatable single row. | - |
| rowItemLabelClassName | string | For customizing styles of datatable table body row label. | - |
| entriesWrapperClassName | string | For customizing styles of entries wrapper. | - |
| entriesHeaderClassName | string | For customizing styles of entries header. | - |
| selectEntriesWrapperClassName | string | For customizing styles of entries select dropdown input. | - |
| selectEntryItemClassName | string | For customizing styles of entries dropdown each item. | - |