data |
Array.<Object>
|
|
The data source of the table body contents. |
keyField |
string
|
<optional>
|
The property name of data source used to uniquely
identify the data source an element. A nested property can be specified by connecting
then with '.'. |
className |
string
|
<optional>
|
The class name that is added to the root element. |
tableClassName |
string
|
<optional>
|
The class name that is added to the HTML table
element. |
omitsHeaderRow |
boolean
|
<optional>
|
true if not display header row, otherwise false.
Default to false.
|
columns |
Array.<Object>
|
|
The setting of data table's columns.
Properties
| Name |
Type |
Attributes |
Description |
key |
string
|
<optional>
|
The identifier for uniquely identifying the column. |
header |
string
|
<optional>
|
The header content of the column. |
content |
string
|
BodyRenderer
|
|
The property name of the data source
used to get the content of the table body. A nested property can be specified by connecting
then with '.'. |
isNumeric |
boolean
|
<optional>
|
Specify true if this columns is a numeric
column, otherwise false. Default to false. |
isRowHeader |
boolean
|
<optional>
|
Specify true if a cells of this columns
is a header for each row, otherwise false. Default to false. |
className |
string
|
<optional>
|
The class name that is added to cells of the
column. |
headerClassName |
string
|
<optional>
|
The class name that is added to a cell
of the column in the header row. |
bodyClassName |
string
|
<optional>
|
The class name that is added to cells
of the column in the body rows. |
headerAttrs |
Object
|
<optional>
|
The attributes to add to cell elements
in the header row. Specify an object that has the attribute name as the key and the attribute
value (string) as the value. |
bodyAttrs |
Object
|
<optional>
|
The attributes to add to cell elements
in the body rows. Specify an object that has the attribute name as the key and the attribute
value (string or BodyRenderer) as the value. The format of the values is the same
as the content property. |
isSortable |
boolean
|
<optional>
|
Specify true if the column is sortable,
otherwise false. Default to false. |
sortStatus |
string
|
<optional>
|
Specify 'ascending' or 'descending'
if the column is sorted. If props.columns[].isSortable is false, this attribute is
ignored. |
|
usesRowSelection |
boolean
|
<optional>
|
Specify true if table has the row selection
feature, otherwise false. Default to false. |
selectionField |
string
|
<optional>
|
The property name of data source used to select
a row in the table. A nested property can be specified by connecting then with '.'. |
rowClassName |
RowClassName
|
<optional>
|
The function to get the class name of
the table row. |
aria-label |
string
|
<optional>
|
The aria-label attribute added to the table tag. |
usesStickyHeader |
boolean
|
<optional>
|
Specify true if you want to make header
row sticky (fixed) on vertical scroll, otherwise false. Default to false. (Note:
Sticky header feature is not compatible with IE11 browsers.) |
mdcDataTableRef |
React.MutableRefObject
|
<optional>
|
MutableRefObject which bind an
MDCDataTable instance to. The instance is bind only if props.usesRowSelection is
true or props.columns includes some sortable columns. |
onScroll |
EventHandler
|
<optional>
|
Specifies event handler that is called when
table is scrolled. |
onRowSelectionChanged |
EventHandler
|
<optional>
|
Specifies event handler that is
called when row selection checkbox is clicked. |
onSelectedAll |
EventHandler
|
<optional>
|
Specifies event handler that is called
when all rows are selected by clicking checkbox in header. |
onUnselectedAll |
EventHandler
|
<optional>
|
Specifies event handler that is called
when all rows are unselected by clicking checkbox in header. |
onSorted |
EventHandler
|
<optional>
|
Specifies event handler that is called when
sort icon of header cell is clicked. |