React中的DataTables.net-需要標題欄單元格上的工具提示

Question

我在React應用程序中使用datatables.net表。 我想知道如何在“生效年份”列的標題上創建工具提示。

componentDidMount() {
    this.setupTable(this.props.data);
}

setupTable(data) {

    this.$el = $(this.el);
    this.$el.DataTable(
        {
            alternatingRowStyle: true,
            sort: 'enable'
            data: data,
            "oLanguage": {
                "sSearch": "Search"
            },
            columns: [
                {
                    "title": "Parcel ID",
                    mData: "ParcelID"
                },
                {
                    "title": "Land Value",
                    mData: "TotalLandValue",
                    render: $.fn.dataTable.render.number(',', '', 0, '$')
                },
                {
                    "title": "Effective Year Built",
                    mData: "effectiveyearbuilt"
                }
            ]
        }
    )
}

我嘗試了許多解決方案，但無濟於事。 我似乎也無法在該特定單元格中標記一個唯一ID？ 謝謝你的幫助。

Answer 1

根據您的需求，您可能會受益於引入像react-table （react-table）這樣的程序包-我之前在項目中使用過此程序，它確實很好用。 您可以定義自定義呈現的組件-您可以直接獲取另一個程序包react-tooltip （react-tooltip） 。

我發現使用React特定的節點包比在可能的情況下拉入JS庫要容易一些。

Answer 2

如果您需要為列標題節點分配一個屬性（在您的情況下為id ），則可以使用以下方法：

$(dataTable.column(2).header()).attr('id', '/* some id here */');

其中dataTable是變量，由DataTable()構造函數返回