3.0.11 • Published 1 year ago

@itneris/table v3.0.11

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

ItNeris Table

Custom ItNeris company grid based on MaterialUI


Content

  1. Common props
  2. Client-side
  3. Server-side
  4. Column properties
  5. Custom actions and Redux compatability
  6. Additional classes

Common props

  1. onDownload: function(options) � �������� �� ������� �� ������ ����������
  2. sortBy: string � ���� ������, �� ������� ��������� ���������� �������
  3. sortDir: "asc" || "desc" � ���� ������, �� ����������� ��������� ���������� �������
  4. title: string � ���� ������, �� ����� ������� ��������� �������� � ������� ������, � ��������� ������ ����� ����� �������� ������
  5. mimeType: string � mime-type ��� ����� �������� �������, �� ��������� text/csv
  6. showColNums: bool � ����������� ������� ������� �������, �� �������� false
  7. disablePaging: bool � �������� ��������� �������, �� �������� false
  8. showRowNums: bool � ����������� ������� ����� �������, �� �������� false
  9. multiFilter: bool � ��������� �������� ��������� �������� � �������� �������, �� �������� false
  10. disableSearch: bool � ��������� ����������� ������ �� �������, �� �������� false
  11. 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");
    }}
/>
  1. overflow: bool � ��������� ������� ������������� �� ������� ������ �� ��� X �� �����������, �� �������� false
  2. rowCount: number � ���������� ����� �� ��������, �� ��������� 25
  3. columns: arrayOf(Column) � ������ ������� �������

Client-side

  1. data: array � ������ �������, ������ ����
 [
    { id: 1, name: 'name 1', date: '2021-03-02T12:00:00' },
    { id: 2, name: 'name 2', date: '2021-03-03T15:00:00' },
 ]
  1. downloadName: string � ������������ ����� �������� �������
  2. 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

  1. showLoader: function() � ������� ��� ����������� ���������� �������� �� ����� ������� � �������
  2. stopLoader: function() � ������� ��� ������� ���������� �������� �� ����� ������� � �������
  3. onDownloadUrl: string � URL ��� ���������� GET ������� � ������� ��� ��������� ����� ��������
  4. downloadWithFilters: bool � ���� true, �� ��� ��������� Blob ����� �������� POST ������ � ��������� ����� ������� � ���� �������
  5. 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' },
 ]
  1. 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

  1. name: string � ������������ ������� � ������� data �������
  2. label: string � ����������� ������������ �������
  3. 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

  1. search (string) � ������� ����� �� �������
  2. onSearchChanged (function(search: string)) � ���� ������� ������ ������ � search, ������� ��� ������ �������� ����� ������������ searh � ���������� ��������� ��������� ���������� �������� � ������������ ����������
<Table
    search={this.props.search}
    onSearchChanged={(searchVal) => this.props.changeSearch(searchVal)}
/>
  1. initialFilters (Filter) � ������� ������� �� �������
  2. onFilterChanged (function(filters: arrayOf(Filter))) � ���� ������� ������ ������ � initialFilters, ������� ��� ������ �������� ����� ������������ initialFilters ��� ������� ���������� � ���������� ��������� ��������� ���������� �������� � ������������ ����������
<Table
    initialFilters={this.props.filter}
    onFilterChanged={(filter) => this.props.changeFilters(filter)}
/>
  1. sort (Filter) � ������� ���������� �������
  2. 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"
}
3.0.10

1 year ago

3.0.11

1 year ago

3.0.8

1 year ago

3.0.9

1 year ago

3.0.7

1 year ago

3.0.6

1 year ago

3.0.5

1 year ago

3.0.4

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

2.1.18

2 years ago

2.1.19

2 years ago

2.1.21

2 years ago

2.1.22

2 years ago

2.1.20

2 years ago

2.1.17

2 years ago

2.1.16

2 years ago

2.1.15

2 years ago

2.1.13

2 years ago

2.1.9

3 years ago

2.1.12

3 years ago

2.1.10

3 years ago

2.1.11

3 years ago

2.1.6

3 years ago

2.1.5

3 years ago

2.1.8

3 years ago

2.1.7

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.1.0

3 years ago

2.0.22

3 years ago

2.0.21

3 years ago

2.0.15

3 years ago

2.0.3

3 years ago

2.0.16

3 years ago

2.0.2

3 years ago

2.0.13

3 years ago

2.0.5

3 years ago

2.0.14

3 years ago

2.0.11

3 years ago

2.0.7

3 years ago

2.0.12

3 years ago

2.0.6

3 years ago

2.0.9

3 years ago

2.0.10

3 years ago

2.0.8

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

2.0.19

3 years ago

2.0.17

3 years ago

2.0.18

3 years ago

2.0.20

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.1.2

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago