Sets the algorithm used to lay out table cells, rows, and columns
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. Table with fixed group header #įixed group head is supported Single select # 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. This component requires the wrap when used in SSR (eg: Nuxt ) and SSG (eg: VitePress ).
0 kommentar(er)
