@itneris/table v3.0.11
ItNeris Table
Custom ItNeris company grid based on MaterialUI
Content
- Common props
- Client-side
- Server-side
- Column properties
- Custom actions and Redux compatability
- Additional classes
Common props
- onDownload: function(options) � �������� �� ������� �� ������ ����������
- sortBy: string � ���� ������, �� ������� ��������� ���������� �������
- sortDir: "asc" || "desc" � ���� ������, �� ����������� ��������� ���������� �������
- title: string � ���� ������, �� ����� ������� ��������� �������� � ������� ������, � ��������� ������ ����� ����� �������� ������
- mimeType: string � mime-type ��� ����� �������� �������, �� ��������� text/csv
- showColNums: bool � ����������� ������� ������� �������, �� �������� false
- disablePaging: bool � �������� ��������� �������, �� �������� false
- showRowNums: bool � ����������� ������� ����� �������, �� �������� false
- multiFilter: bool � ��������� �������� ��������� �������� � �������� �������, �� �������� false
- disableSearch: bool � ��������� ����������� ������ �� �������, �� �������� false
- disableSortProps: bool � ��������� ��������� ���������� ���������� ������� � ���������� onSortingChanged ��� ��������� ������ ��������� �������� ����������, �� �������� false
<Table
data={this.state.tableData}
sort={this.state.gridSort} //��������� �� �� ���������� ��� �������� ������������
disableSortProps={true} //��������� ���������� ������ ���������� �������
onSortingChanged={async (sort) => {
//������� � �� ��������� ����������
await HttpUtil.fetchAsync("/api/Users/ChangeEclSort", { sort: JSON.stringify(sort) }, "POST");
}}
/>
- overflow: bool � ��������� ������� ������������� �� ������� ������ �� ��� X �� �����������, �� �������� false
- rowCount: number � ���������� ����� �� ��������, �� ��������� 25
- columns: arrayOf(Column) � ������ ������� �������
Client-side
- data: array � ������ �������, ������ ����
[
{ id: 1, name: 'name 1', date: '2021-03-02T12:00:00' },
{ id: 2, name: 'name 2', date: '2021-03-03T15:00:00' },
]
- downloadName: string � ������������ ����� �������� �������
- filterList: arrayOf(Filter) - ������ ��������� �������� ��� �������
Example client
<Table
data={this.state.rows}
filterList={[
{ column: "status", value: ["�����������", "�������"] },
]}
initialFilters={[{ column: "status", value: ["�������"] }]}
onRowClick={(n) => this.props.history.push(`/entity/edit/` + n.id)}
sortBy="name"
sortDir="asc"
columns={columns}
onDownloadUrl={"api/Controller/Download"}
/>
Server-side
- showLoader: function() � ������� ��� ����������� ���������� �������� �� ����� ������� � �������
- stopLoader: function() � ������� ��� ������� ���������� �������� �� ����� ������� � �������
- onDownloadUrl: string � URL ��� ���������� GET ������� � ������� ��� ��������� ����� ��������
- downloadWithFilters: bool � ���� true, �� ��� ��������� Blob ����� �������� POST ������ � ��������� ����� ������� � ���� �������
- data: string � URL ��� ���������� POST ������� � ��������� ����� � ���� �������, � ����� ������� ������ ����
[
{ id: 1, name: 'name 1', date: '2021-03-02T12:00:00' },
{ id: 2, name: 'name 2', date: '2021-03-03T15:00:00' },
]
- filterList: string � URL ��� ���������� GET ������� � ������� ��� ��������� ������� ��������� ��������
Example server
<Table
showLoader={this.props.showLoader}
stopLoader={this.props.stopLoader}
data="api/Controller/List"
onDownloadUrl="api/Controller/Download"
filterList="api/Controller/GetFilters"
downloadWithFilters
columns={columns}
onRowClick={(n) => this.props.history.push("/entity/edit/" + n.id)}
/>
Column properties
- name: string � ������������ ������� � ������� data �������
- label: string � ����������� ������������ �������
- options � �������� ������
- customBodyRender: function(value, row) � ������ �������� �������, �������� �� � �������� � ������ � �����
customBodyRender: value => <div style={{ fontWeight: "bold" }}>
{value}
</div>
- customHeadRender: function() � ������ ��������� �������
customHeadRender: () => <Box display="flex" alignItems="center">
������
<Tooltip title='���������'><HelpOutline /></Tooltip>
</Box>
- type: "array" � ���� �����, �� �� ������� ����� ������������ ����� � ���������� ��� �� �������
- filterType: "and" || "or" � ���� ����� type = array, �� ���������� "�" ��� "���" ���������� ����� ������������� �� �������, �������� �� ��������� "OR"
- trasformData: function(value) � ���� ������, �� �� ������� ����� ������������ �����, ���������� � ���������� ��� ���������, ������� ���������� �������
options: {
customBodyRender: v => v === null ? "���" : ToDateString(v, true),
transformData: v => v === null ? "���" : "��",
},
- sort: bool � ��������� ���������� �� �������, �������� �� ��������� true
- display: bool � ������������ �������, �������� �� ��������� true
Custom actions and Redux compatability
- search (string) � ������� ����� �� �������
- onSearchChanged (function(search: string)) � ���� ������� ������ ������ � search, ������� ��� ������ �������� ����� ������������ searh � ���������� ��������� ��������� ���������� �������� � ������������ ����������
<Table
search={this.props.search}
onSearchChanged={(searchVal) => this.props.changeSearch(searchVal)}
/>
- initialFilters (Filter) � ������� ������� �� �������
- onFilterChanged (function(filters: arrayOf(Filter))) � ���� ������� ������ ������ � initialFilters, ������� ��� ������ �������� ����� ������������ initialFilters ��� ������� ���������� � ���������� ��������� ��������� ���������� �������� � ������������ ����������
<Table
initialFilters={this.props.filter}
onFilterChanged={(filter) => this.props.changeFilters(filter)}
/>
- sort (Filter) � ������� ���������� �������
- onSortingChanged (function(sort: arrayOf(Sort))) � ���� ������� ������ ������ � sort, ������� ��� ���������� �������� ����� ������������ sort ��� ������� ���������� � ���������� ��������� ��������� ���������� �������� � ������������ ����������
<Table
sort={this.props.sort}
onSortingChanged={(sorting) => this.props.changeSorting(sorting)}
/>
Additional classes
Table options
- rowsPerPage: number � ���������� ����� �� ��������
- page: number � ������� ��������
- search: string � ��������� ������
- sort: string � ��������� ������
- filters: arrayOf(Filter) � ������� ����������
- columns: arrayOf(string) � ������� ������������ �������
- headRows: arrayOf(string) � ������� ������������ ������ ���������
File
- name � ������������
- file � �������� ������
Filter
- name: string � ������������ �������
- value: arrayOf(string) � �������� �������
{
column: "status",
value: ["� ������", "�����"]
}
Sort
- column: string � ������������ �������
- dir: "asc" || "desc" � ����������� ����������
{
column: "date",
dir: "desc"
}
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago