Custom ItNeris company grid based on MaterialUI
- Common props
- Methods
- Client-side
- Server-side
- Column properties
- Custom actions and Redux compatability
- Additional classes
- onDownload: function(options) || string — действие по нажатию на иконку скачивания, если функция, или URL для выполнения GET запроса к серверу для получения файла выгрузки в случае строки
- sort: arrayOf(Sort) — начальная сортировка таблицы
- filters: arrayOf(Filter) — начальная фильтрация таблицы
- 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
- context: arrayOf(Context option) — опции контекстного меню
- stripedRows: bool — подкрашивать четные строки, по умочанию 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) — массив колонок таблицы
- stickyHeader: bool — если true, то шапка таблицы при вертикальной прокрутке будет оставаться на месте, по умолчанию false
- small: bool — paddingTop и paddingBottom у строк становятся меньше, по умолчанию false
- stripedRows: bool — чередует цвет строк таблицы, по умолчанию false
- maxHeight: number — свойство maxHeight таблицы будет расчитываться по формуле: 100vh - {значение}px, по умолчанию null
- minWidth: number — задает минимальную ширину таблицы в пикселях,по умолчанию null
- sections: object — массив секций в котором задаются параметры отображения секций
{
1: { expanded: true },
2: { expanded: true },
3: { expanded: true },
4: { expanded: true }
}
- disableToken: bool — отключить передачу accessToken на сервер, по умолчанию false
- searchProps: object:TextFieldProps — объект свойств Texfield
- customToolbar: React.Element — дополнительная строка с действиями грида, которая отобразится справа перед фильтрами
- tooltipElement: React.Element — элемент, используемый в качестве тултипа для элементов управления
- searchTooltip: string — текст тултипа для поиска, по умолчанию "Поиск"
- filterTooltip: string — текст тултипа для фильтрации, по умолчанию "Фильтрация"
- resetSearchTooltip: string — текст тултипа для сброса поиска, по умолчанию "Сбросить поиск"
- downloadTooltip: string — текст тултипа для экспорта таблицы, по умолчанию "Экспорт"
- viewColumnTooltip: string — текст тултипа для скрытия секций, по умолчанию "Отображение секций"
- fetch() — вызывает запрос на сервер для обновления данных
- getData() — возвращает список текущих строк
- transformData(rows) — заменяет список текущих строк
- 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) - массив доступных фильтров для таблицы
<Table
data={this.state.rows}
filterList={[
{ column: "status", value: ["Блокировано", "Активно"] },
]}
filters={[{ column: "status", value: ["Активно"] }]}
onRowClick={(n) => this.props.history.push(`/entity/edit/` + n.id)}
sort={[{ column: "name", dir: "desc" }]}
columns={columns}
onDownloadUrl={"api/Controller/Download"}
/>
- showLoader: function() — функция для отображения глобальной загрузки во время запроса к серверу
- stopLoader: function() — функция для скрытия глобальной загрузки во время запроса к серверу
- 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 запроса к серверу для получения массива доступных фильтров
<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)}
/>
- 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
- section: number — номер секции к которой будет привязан столбец, значение по умолчанию null
- sectionFilterLabel: string — наименование секции, которое будет отображаться в фильтре секций (указывается только один раз в любом столбце каждой секции), значение по умолчанию null
- search (string) — текущий поиск по таблице
- onSearchChanged (function(search: string)) — если функция задана вместе с search, таблица для поиска значений будет использовать searh и возвращать результат изменения поискового значения в родительский компоненет
<Table
search={this.props.search}
onSearchChanged={(searchVal) => this.props.changeSearch(searchVal)}
/>
- filters (arrayOf(Filter)) — текущие фильтры по таблице
- onFilterChanged (function(filters: arrayOf(Filter))) — если функция задана вместе с filters, таблица для поиска значений будет использовать filters для каждого обновления и возвращать результат изменения фильтрации значения в родительский компоненет
<Table
filters={this.props.filter}
onFilterChanged={(filter) => this.props.changeFilters(filter)}
/>
- sort (arrayOf(Sort)) — текущая сортировка таблицы
- onSortingChanged (function(sort: arrayOf(Sort))) — если функция задана вместе с sort, таблица для сортировки значений будет использовать sort для каждого обновления и возвращать результат изменения сортировки значения в родительский компоненет
<Table
sort={this.props.sort}
onSortingChanged={(sorting) => this.props.changeSorting(sorting)}
/>
- rowsPerPage: number — количество строк на странице
- page: number — текущая страница
- search: string — поисковый запрос
- sort: arrayOf(Sort) — фильтрация
- filters: arrayOf(Filter) — текущая фильтрация
- columns: arrayOf(string) — текущие отображаемые колонки
- headRows: arrayOf(string) — текущие отображаемые строки заголовка
- name — наименование
- file — бинарные данные
- name: string — наименование колонки
- value: arrayOf(string) — значения фильтра
- inToolbar: bool — отобразить фильтр в тулбаре, по умолчанию false
{
column: "status",
value: ["В работе", "Новый"]
}
- column: string — наименование колонки
- dir: "asc" || "desc" — направление сортировки
{
column: "date",
dir: "desc"
}
- name: string — наименование пункта меню
- action: function(id, row) — действие по нажатию
- hidden: bool — скрывать пункт для строки
- options: arrayOf(Context option) — вложенное суб-меню
[
{
name: "Show row Id ",
action: (id, row) => alert(id),
hidden: row => row.id % 2 === 0,
},
{
name: "Show inner menu",
options: [
{
name: "Show row column 'name'",
action: (id, row) => alert(row[name])
}
]
}
]