数据表 MDB Pro组件

数据表-Bootstrap 5和Material Design 2.0

数据表是一个将表与高级选项(例如搜索, 分类和分页。

注意:阅读 API标签以查找所有可用选项,并 高级定制

影片教学


基本示例-HTML标记

Datatable组件可以三种方式呈现数据。在第一个中,您只需 使用“ datatable”类为嵌套在div标签中的表创建HTML标记-您可以 稍后通过将data-mdb-attributes添加到包装器来定制表。一些更多 列的高级选项,如 高级数据结构部分也可以 通过将data-mdb-attributes直接设置为th标签来使用(f.e. <th data-mdb-sort="false">).

Datatable从HTML标记中收集信息以创建数据结构- <table> 之后,元素将在DOM中替换为其他节点 组件初始化。

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Jonas Alexander Developer San Francisco 30 2010/07/14 86
Shad Decker Regional Director Edinburgh 51 2008/11/13 183
Michael Bruce Javascript Developer Singapore 29 2011/06/27 183
Donna Snider Customer Support New York 27 2011/01/25 112

基本数据结构

第二种选择是一个非常基本的数据结构,其中列由一个数组 字符串,每一行也是如此。该表会将一行中的每个字符串匹配到相应的索引 在column数组中。这种基于索引而不是键值对的数据结构可以是 轻松用于显示CSV格式的数据。


先进的数据结构

最新,最先进的数据结构允许自定义每一列(排序,宽度,固定, 字段),并将每一行的值匹配到一列,其中“字段”等于给定键 值。此数据格式可轻松用于显示JSON数据。

您还可以使用混合版本,其中列是对象的数组,每行是一个对象 字符串数组。




可选行

当selectable选项设置为 true 时,用户可以通过以下方式与您的表进行交互 选择行-您可以通过听 selectRows.mdb.datatable 事件。


滚动

设置最大高度/宽度将启用垂直/水平滚动。


固定头

使用 fixedHeader 选项确保表的标题始终可见 滚动时。


固定柱

使列变粘需要设置两个选项-宽度和固定。第一个选择是 像素数,而另一个可以是 true (在这种情况下,列将停留在左侧)或字符串 正确

在垂直滚动表中使用固定列需要设置一个选项 也将 fixedHeader 更改为 true

当使用HTML标记而不是数据结构时,您仍然可以通过以下方式使用此功能: 标签上的 data-mdb-width data-mdb-fixed 属性。


异步数据

异步加载内容是使用数据表-使用MDB的重要部分 通过使用API从API提取内容后,您可以轻松显示数据表 update 方法。此外,将 loading 选项设置为 true 将禁用所有交互,并在等待时显示一个简单的加载器 数据。


动作按钮

使用数据表可以渲染自定义内容,例如操作按钮和附加 听众了解他们的活动。请记住,组件在各种情况下都会重新发布内容 发生操作(例如排序,搜索),并且事件监听器需要更新。为了使其成为可能 组件会发出自定义事件 render.mdb.datatable


单元格格式


可点击的行

单击行以预览消息。

选择带有复选框的行不会触发 rowClick 事件。

注意:为防止行中的其他可点击元素执行此操作,请调用 stopPropagation()方法。

注意:此功能不能与 edit 选项同时使用。


数据表 - API


用法

通过数据属性

使用Datatable组件不需要任何其他JavaScript代码-只需添加一个 div包装器在您的表中带有“数据表”类,并使用数据属性设置所有选项。


        <div class="datatable" data-mdb-bordered="true">
        <table>
            <thead>
            <tr>
                <th data-mdb-sort="false" data-mdb-fixed="true" data-mdb-width="100">Column 1</th>
                <th>Column 2</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Value 1</td>
                <td>Value 2</td>
            </tr>
            </tbody>
        </table>
        </div>
    

通过JavaScript

如果您希望使用JavaScript渲染表,请使用mdb.Datatable初始化实例 构造函数。


        const datatableInstance = new mdb.Datatable(document.getElementById('my-datatable'), {
        columns: [
            { label: 'Column 1', width: 100, fixed: true, sort: false },
            { label: 'Column 2'}
        ],
        rows: [
            ['Value 1', 'Value 2']
        ]
        }, {
            bordered: true
        })
    

通过jQuery

注意:默认情况下,MDB不包含jQuery,您必须将其添加到您的项目中 拥有。


        $('#my-datatable').datatable({
        columns: [
            { label: 'Column 1', width: 100, fixed: true, sort: false },
            { label: 'Column 2'}
        ],
        rows: [
            ['Value 1', 'Value 2']
        ]
        }, {
            bordered: true
        })

        // Calling .update() with the jQuery interface:

        $('#my-datatable').datatable('update', { rows: [...], columns: [...]}, { bordered: true, loading: false })

    

选件

Name Type Default Description
bordered Boolean false Adds borders to a datatable
borderless Boolean false Removes all borders from a datatable
borderColor String Changes a border color to one of main colors
color String Adds a color class to a datatable (f.e 'bg-dark')
dark Boolean false Changes a font color to white
defaultValue String '-' This string will be used as a placeholder if a row doesn't have a defined value for a column
edit Boolean false Enables edit mode
entries Number 10 Number of visible entries (pagination)
entriesOptions Array [10, 25, 50, 200] Options available to choose from in a pagination select (rows per page)
fixedHeader Boolean false When it's set to true, the table's header will remain visible while scrolling
fullPagination Boolean false Displays additional buttons for the first and last pages
hover Boolean false Changes the background color of a hovered row
loading Boolean false Sets the loading mode - disables interactions and displays a loader
loaderClass String 'bg-primary' The class name for a loader (loading mode)
loadingMessage String 'Loading results...' A message displayed while loading data
maxWidth Number|String Sets a maximum width of a datatable - can be either a string ('10%') or a number of pixels.
maxHeight Number|String Sets a maximum height of a datatable - can be either a string ('10%') or a number of pixels.
selectable Boolean false Enables selecting rows with checkboxes
multi Boolean false Allows selecting multiple rows (selectable mode)
noFoundMessage String 'No matching results found' A message displayed when a table is empty
pagination Boolean true Shows/hides the pagination panel
sm Boolean false Decreases a row's paddings
striped Boolean false Slightly changes the background's color in every other row
rowsText String 'Rows per page': A text indicating a number of rows per page
clickableRows Boolean false Makes rows clickable

Options (column)

Name Type Default Description
label String '' A displayed header of a column
field String '' A field's name - will be used as a key for values in rows
fixed Boolean|String false When set to true, makes a column stick on the left while scrolling. Changing its value to right will do the same on the other side. For this option to work, you need to define width as well.
width Number A column's width in pixels
sort Boolean true Enables/disables sorting for this column
format(cell, value) Function Function runs for each cell, taking the DOM node & cell's value as its parameters

方法

Name Description Example
update Updates and rerenders datatable datatableInstance.update(data: Object, options: Object)
search Filters rows so there are only those containing the searched phrase datatableInstance.search(phrase: String, column: String|Array (optional))
dispose Removes the component's instance datatableInstance.dispose()

大事记

Name Description
update.mdb.datatable This event fires in an editable mode when a user updates values. You can access the updated data inside a listener's handler with event.rows and event.columns fields.
selectRows.mdb.datatable This event fires when a user select rows with checkboxes. You can acquire more information about selected rows with the following properties of an emitted event: selectedRows: Array, selectedIndexes: Array, allSelected: Boolean
render.mdb.datatable Event emitted after the component renders/updates rows.
rowClick.mdb.datatable Event emitted after clicking on a row

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { Datatable } from 'mdb-ui-kit';