2/28/2023 0 Comments Element chart![]() Used in multiple selection Table, toggle select all and deselect all With the second parameter, you can directly set if this row is selected Used in multiple selection Table, toggle if a certain row is selected. Used in multiple selection Table, clear user selection Triggers when user expands or collapses a row (for expandable table, second param is expandedRows for tree Table, second param is expanded) Triggers after changing a column's width by dragging the column header's border If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered Triggers when user right clicks on a column headerĬolumn's key. Triggers when user right clicks on a cell Triggers when user clicks the checkbox in table header Triggers when user clicks the checkbox in a row Sets the algorithm used to lay out table cells, rows, and columnsĮnsure main axis minimum-size doesn't follow the content Whether width of column automatically fits its containerįunction that returns custom class names for a row, or a string assigning class names for every rowįunction that returns custom style for a row, or an object assigning custom style for every rowįunction that returns custom class names for a cell, or a string assigning class names for every cellįunction( The legal value is a number or the height in px. ![]() If its value is a number, the height is measured in pixels if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles The table-layout property sets the algorithm used to lay out table cells, rows, and columns. You can customize row index in type=index columns. Rowspan and colspan #Ĭonfiguring rowspan and colspan allows you to merge cells Custom index # Tree data and lazy mode # Summary row #įor table of numbers, you can add an extra row at the table footer displaying each column's sum. When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature. Table with custom header #Ĭustomize table header so it can be even more customized. Custom column template #Ĭustomize table column so it can be integrated with other components. Filter #įilter the table to find desired data. Sort the data to find or compare data quickly. When the data structure is complex, you can use group header to show the data hierarchy. When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed. Fluid-height Table with fixed header (and columns) # ![]() When you have huge chunks of data to put in a table, you can fix the header and columns at the same time. When there are too many columns, you can fix some of them. When there are too many rows, you can use a fixed header. You can highlight your table content to distinguish between "success, information, warning, danger" and other states. Striped table makes it easier to distinguish different rows. Basic table #īasic table is just for data display. You can sort, filter, compare your data in a table. Display multiple data with similar format.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |