The best Datatable for Vue.js 2.x which never sucks. Give us a star 🌟 if you like it! (DEPRECATED. As I, @kenberkeley, the only maintainer, no longer works for OneWay. Bugs may be fixed but new features or breaking changes might not be merged. However, it's still the best in my mind because of its extremely flexible usage of dynamic components)
Fully uncontrolled and client-side datatable based on material design. Designed with React philosophy. Just set your data and receive common manipulations on it: filtering, sorting, pagination and etc.
This library is under the work. It means, that we can do Breaking Changes during one major alpha version. Please, check the CHANGELOG before update your current version.
Options for each column. Detailed description see here
customCell
Function
Function that returns a string or React component. Used as display for body cell. ({value: string, column: Object, row: Object}) => string | React.Component
data
Object[]
[]
Your dataset, that you want to display in the table
page
number
0
Current page. Start with 0
perPage
number
5
Quantity of displaying items per page.
perPageOption
number[]
[5, 10, 15]
Per page option. Displayed on the paging panel
selectedData
Object[]
[]
Array of refs of selected data items. For example, [data[0], data[1]] will select first and second row.
Function that returns a string or React component. Used as display actions in Toolbar selection. More details you can read here. You can see example in storybook at section Props -> toolbarSelectActions
toolbarActions
Function
Function that returns a string or React component. Used to display custom actions in toolbar panel. Signature ({data: Object, computedData: Object, displayData: Object}) => string | React.Component
rowActions
Function
Function that returns a string or React component. Used to display custom actions in each row. Signature ({row: Object, rowIndex: number}) => string | React.Component
showSearchBar
boolean
false
Open or close search bar in toolbar panel
searchValue
string
""
The value by which the search is performed
sort
Array
[{ columnName: '', direction: "ASC" }]
Set sorting by column name and set direction for sorting. Can be set sort with multiple columns. Direction may be: ASC and DESC
filterValues
Object
{}
Set filters for columns
onStateChanged
Function
Handler for state changing. Receives event-like object. Signature (event: {name: string, value: string, state: Object}) => any, where name - changed state, value - new value, state - current state of datatable component. Notice, that state contains only changeable values. It useful to restore state after reloading page, for example
Function that returns a string or React component. Used as display text if was no matches after applying filters. (localization: string) => string | React.Component
Current dataset in the table (with applying filters and sort)
selectedData
Object[]
Current selected data (their refs)
updateSelectedData
( Object[] ) => any
Function, that apply new selected data
handleDelete
( Object[] ) => any
Function, that delete selected data. For example, you can call it, when you got successful response from your api
localization
Default value
{toolbar: {searchAction: 'Search',filterAction: 'Filters',closeSearch: 'Close search',},filterLists: {title: 'Filter',allOption: 'All',reset: 'Reset',noMatchesText: 'No matches',},toolbarSelect: {selectedData: count=>`${count} row(s) selected`,},pagination: {rowsPerPage: 'Rows per page',displayedRows: ({ from, to, count })=>`${from}-${to} of ${count}`,},body: {noMatchesText: 'No matches',},}
toolbar
Name
Type
Default
Description
searchAction
string
'Search'
Label for search button
filterAction
string
'Filters'
Label for filters button
closeSearch
string
'Close search'
Label for close button of search bar
filterLists
Name
Type
Default
Description
title
string
'Filter'
Label for title of filter menu
allOption
string
'All'
Label for option 'All' of select controls
reset
string
'Reset'
Label for reset button of filters
noMatchesText
string
'No matches'
Text if no matches in autocomplete
toolbarSelect
Name
Type
Default
Description
selectedData
Function
count => `${count} row(s) selected`
Function that receives count of selected rows and returns string
pagination
Name
Type
Default
Description
rowsPerPage
string
'Rows per page'
Label for select rows per page
displayedRows
Function
({ from, to, count }) => `${from}-${to} of ${count}`
Function that receives from, to and count of data elements and returns string
Column option
Name
Type
Default
Description
name
string
Name associated to your data"s object
label
string
Display column title
sortable
boolean
true
Enable / disable sorting by column
filterable
boolean
true
Enable / disable filtering by column. false will exclude column from filter panel
searchable
boolean
true
Including / excluding column from search results
ReactMUIDatatableProvider with ReactMUIDatatableRoot component
If you have separate screens for editing, creating, detailing items or you have your own screens, and you want to save state of your datatable between pages, you can lift state of the table higher with ReactMUIDatatableProvider. It receives all props from description ReactMUIDatatable's API. To draw table just use ReactMUIDatableRoot component. It's already connect to Provider and will receive all props, that was passed into ReactMUIDatatableProvider. See example below.
Example
Soon here will be link to example. Sorry :(
Alternative
mui-datatables - multifunctional table based on material ui components
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].