๐๐ก The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
MIT License
Bot releases are hidden (Show)
Published by js87zz about 4 years ago
null
, undefined
original value should be kept in editor.(#1174)Published by js87zz about 4 years ago
width: 'auto'
option as text length.(#1148)
const columns = [{
name: 'name',
width: 'auto',
// ...
}];
beforeChange
and afterChange
event. The event will be triggered on editing or pasting, deleting the data by keyMap. The existing column events(onBeforeChange
, onAfterChange
) will be deprecated.(#1149)
grid.on('beforeChange', ev => {
/**
* {
* origin: 'cell' | 'paste' | 'delete'
* changes: [{ rowKey: 0, columnName: 'name', value: 'value', nextValue: 'nextValue', prevValue: 'prevValue' }]
* }
*/
console.log(ev);
});
change.nextValue
as below.grid.on('beforeChange, ev => {
ev.changes.forEach(change => {
if (change.nextValue === 'needReplace') {
// 'needReplace' is replaced with empty string
change.nextValue = '';
}
});
});
null
or undefined
cell value is changed to empty string in validatorfn
.(#1141)editingEvent
option is click
(#1143)Published by js87zz over 4 years ago
Added custom comparator option.(#1096)
comparator
option is useful to sort the data with user's own comparator. The structure of comparator is same as general compare function which run in javascript sort function. However, you can use the rowA, rowB in our comparator. These parameters is useful to sort the data using other column data. const comparator = (valueA, valueB, rowA, rowB) => {
if (valueA.length < valueB.length) {
return -1;
}
if (valueA.length > valueB.length) {
return 1;
}
return 0;
};
const grid = new Grid({
data,
columns: [
{ name: 'name', header: 'name', comparator },
// ...
]
})
Added unique
built-in validation type.(#1099)
unique
option is useful to check the uniqueness of the column data. const grid = new Grid({
data,
columns: [
{ name: 'name', validation: { unique: true } },
// ...
]
});
Added position
, visiblePages
pageOptions.(#950, #1097)
const grid = new Grid({
data,
columns,
pageOptions: {
useClient: true,
visiblePages: 7,
position: 'top'
}
})
Added more detail information to the result of validate API.(#1107)
errorInfo
is added to the result of validate API. The errorInfo
has more detail information on validation result and it will replace the existing errorCode which is deprecated. // result of validate API.
// errorInfo has errorCode and meta date for handling the validation result more conveniently.
[
{
rowKey: 1,
errors: [
{
columnName: 'c1',
// errorCode is deprecated.
errorCode: ['VALIDATOR_FN'],
errorInfo: [{ errorCode: "VALIDATOR_FN", customCode: 'CUSTOM_CODE' }]
}
]
},
{
rowKey: 2,
errors: [
{
columnName: 'c1',
errorCode: ['MIN'],
errorInfo: [{ errorCode: "MIN", min: 1000 }]
}
]
}
]
scrollEnd
event has been triggered after calling resetData API.(#1086)Published by js87zz over 4 years ago
beforePageMove
, afterPageMove
custom event (#1063)
object
type to CellValue
type definition.(#1054)Published by js87zz over 4 years ago
resetData
API option.(#1049)Published by js87zz over 4 years ago
beforeSort
, afterSort
, beforeUnsort
, afterUnsort
custom event.(#1046)
beforeFilter
, afterFilter
, beforeUnfilter
, afterUnfilter
custom event.(#1047)
setColumns
API.(#1027)v4.9.0
Published by js87zz over 4 years ago
const formattedValue = grid.getFormattedValue('rowKey', 'columnName');
tui-grid-cell-current-row
).(#1000)el
type in react-wrapper.(#1007)Published by js87zz over 4 years ago
select
, checkbox
editing UI is changed to layer UI for visibility of editing content. The editing content is not cut off in layer UI.(#928)disabled
, editable
state in setColumnValues and setValue API.(#931)checked
state of header checkbox has wrong when appending or removing row.(#933)rowHeight: 'auto'
option.(#939)backspace
, del
key is added to modified target.(#957)checked
state of rows with infinite scrolling.(#964)Published by js87zz over 4 years ago
Client infinite scrolling
Users configure the whole data in grid, however, only the paginated data is displayed. The next data will be displayed when users scroll at the bottommost.
const grid = new Grid({
data,
columns,
// bodyHeight option is mandatory
bodyHeight: 300,
pageOptions: {
// should define the `useClient: true` option to use client infinite scrolling
useClient: true,
perPage: 50,
// should define the 'scroll' option
type: 'scroll'
}
});
Infinite scrolling using dataSource
Users configure dataSource and also add data through dataSource in grid.
const grid = new Grid({
data,
columns,
// bodyHeight option is mandatory
bodyHeight: 300,
pageOptions: {
perPage: 50,
// should define the 'scroll' option
type: 'scroll'
}
});
Infinite scrolling using scrollEnd
event
Users directly add the data through using scrollEnd custom event.
const grid = new Grid({
data,
columns,
// bodyHeight option is mandatory
bodyHeight: 300
});
grid.on('scrollEnd', () => {
axios.get('url').then((response) => {
grid.appendRows(response.data);
});
});
validatorfn
parameters.(#911)
const grid = new tui.Grid({
columns: [
{
header: 'Price',
name: 'price',
validation: {
// can get `columnName` and `rowKey` through `row` parameter
validatorFn: (value, row, columnName) => value !== 11000
}
]
// ...
});
Published by js87zz over 4 years ago
nextValue
, prevValue
parameter to onBeforeChange
, onAfterChange
.(#898)
// `nextValue` is to be changed
// `value` is existing value(not changed)
onBeforeChange({ rowKey, columnName, value, nextValue })
// `prevValue` is previous value(before changed)
// `value` is changed value
onAfterChange({ rowKey, columnName, value, prevValue })
undefined
style property to default value(empty string) in virtual DOM for preventing to maintain old style in DOM element.(#894)enumerable
configuration to observable object to spread observable data properly.(#895)Published by js87zz over 4 years ago
contentType
: option to define request body type
application/json
type is added!headers
: option to add headersmimeType
: option for parameter on calling overideMimeType
functionserializer
: option for custom serializerhideLoadingBar
option to hide loading bar on communicating with serverinitParams
to send user defined parameters to server when gets dataurl
option type. the function
type is allowed as url
option to define RESTful URIconst dataSource = {
hideLoadingBar: true,
api: {
readData: {
url: () => `/readData/${applicationId}`,
method: 'get',
initParams: { param: 'param' }
},
createData: {
url: '/createData/`,
method: 'post',
contentType: 'application/json',
headers: { 'x-custom-header': 'x-custom-header' }
}
},
serializer(params) {
// write your serializer
return Qs.stringify(params);
}
}
grid.setRequestParams({ param: 'param' })
// clear all modified data
grid.clearModifiedData();
// clear specific modified data
grid.clearModifiedData('CREATE');
// or
grid.clearModifiedData('UPDATE');
// or
grid.clearModifiedData('DELETE');
disabled
state to cells of the specific column.// configure column `disabled`
const columns = [{ name: 'name' }, { name: 'age', disabled: true }];
new Grid({ data, column })
// or call API
grid.enableColumn('columnName');
grid.disableColumn('columnName');
// before
const columns: OptColumn[] = [
{
name: 'score',
renderer: {
type: SliderRenderer
}
}
];
// after
const columns: OptColumn[] = [
{
name: 'score',
renderer: SliderRenderer
// recommend using existing way in case of having `options` parameter
renderer: {
type: SliderRenderer,
options: {...}
}
}
];
onGridUpdated
custom event to detect updating of the grid data.(#867)string
, number
) data.(#865)focus
, focusAt
API.(#874)resetData
API.(#892)Published by js87zz almost 5 years ago
check
, uncheck
custom events.(#840)setPerPage
API.(#852)Published by js87zz almost 5 years ago
range selection
and some API.
ex. selection, focus, editing
) in the grid cell is not changed for usability. because only the column of header is spanned.const grid = new Grid({
data,
column,
header: {
height: 100,
complexColumns: [
{
header: 'name',
name: 'nameHeader',
childNames: ['id', 'name'],
resizable: true, // resize the complex header or merged header through configuring this option
hideChildHeaders: true // merge the child headers through configuring this option
}
]
}
});
grid.getSelectionRange();
render
method in custom column header interface.(#818)onkeyup
-> oninput
) to solve malfunction on searching.(#827)validation css rule
precedence to solve ignoring the css.(#828)key
property caused side effect in filter select component.(#811)
beforeDestroy
hook for custom renderer.(#822)The test is classified into two tests like below.(#797, #810)
visualization
of the grid element using the storybook.functionality
of the grid except visualization test target.Added Monkey Patch Array.(#804)
observer
, Monkey Patch Array is applied. As the result, our unnecessary code is eliminated and code quality is improved.Published by js87zz almost 5 years ago
header.columns
option. The button, icon or any DOM element you want to render in header column can be grid header column.sortable
, filter
options. Because grid cannot know where render the sort, filter button in your customized header.sort
, filter
) which is able to use in default column header, It should be implemented in your customized header column using the grid
API.class CustomRenderer {
constructor(props) {
const el = document.createElement('div');
this.columnInfo = props.columnInfo;
el.className = 'custom';
el.textContent = `custom_${this.columnInfo.name}`;
this.el = el;
}
getElement() {
return this.el;
}
render(props) {
// write your code to sync the column header state
}
beforeDestroy() {
// do something
}
}
const grid = new tui.Grid({
data,
columns,
header: {
height: 100,
columns: [
{
name: 'id',
renderer: CustomRenderer // define your header custom renderer
}
]
}
});
className
option is provided for column.(#782)
class
to column users wants through configuring the className
option in column.const columns = [
{ name: 'name', className: 'custom-className' },
{ name: 'age' },
{ name: 'location' }
];
const grid = new tui.Grid({columns, ...});
grid.setRow('rowKey', { name: 'name', age: 10 });
grid.moveRow('rowKey', 3);
filter
, unfilter
API.(#743)tui-grid-row-hover
) when gets out of specific row.(#748)operator
parameter on calling filter
API.(#758)editingFinish
event has been not emitted with keyMap editing.(#774)/*
* summaryValue
* {
* sum, min, max, avg, cnt,
* filtered: {
* sum, min, max, avg, cnt
* }
* }
*/
template(summaryValues)ue{
// ...
}
probot
to maintain our issue more effectively.(#758)finishEditing
API.
// legacy
grid.finishEditing('rowKey', 'columnName');
// current
grid.finishEditing(); // recommended
batch update
in our observable system to reduce the unnecessary process and improve the performance.(#785)Published by js87zz about 5 years ago
isOddRow
in bodyDummyRow component. (#716)mousedown
, when event target is same as body area.(#723)Published by js87zz about 5 years ago
Filter
functionality๐. (#676)
There are four built-in filters, which include text
, number
, select
and date
. The text
, number
, date
filters can be used with 2 conditions in conjunction with the operator
option. We will also provide a custom filter option in the next minor release for users who want to use their own filters.
Below is an example of simple usage. See the tutorial for details.
Code
const columns = [
{
name: 'name',
minWidth: 150,
filter: 'text'
}
]
// or
const columns = [
{
name: 'name',
minWidth: 150,
filter: {
type: 'date',
options: {
format: 'yyyy-mm',
type: 'month'
},
operator: 'OR',
showApplyBtn: true, // default false
showClearBtn: true // default false
}
}
]
API
grid.filter(columnName, state)
grid.unfilter(columnName)
grid.getFilterState(columnName);
grid.setFilter(columnName, filterOpt);
onGridBeforeDestroyed
event naming to onGridBeforeDestroy
. (#650)checkAll
, uncheckAll
API. (#663)sort
, unsort
API. (#680)startEditing
, finishEditing
API. (#680)setPerPage
API. (#693)string
value. (#700)finishEditing
, startEditing
API in a row.finishEditing
API has been changed for undefined
value parameter. As the value parameter is undefined
, the editor's value is saved and finish editing.observable
.observable
when expanded.observable
.resetData
, setColumns
API for testing more complicated cases. (#681)const columns = [
{
name: 'monthPicker',
editor: {
type: 'datePicker',
options: {
format: 'yyyy-MM',
type: 'month',
showIcon: false // default true
}
}
}
];
tab
keyMap operation and tabMode
option. (#701)
const { el, grid } = new Grid({
//...
tabMode: 'moveAndEdit'
});
Published by js87zz about 5 years ago
copy
event in IE browser. (#650 )Published by js87zz about 5 years ago
-Infinity
when appends row on empty grid. (#651 )el
variable reference from EditingLayerInner component. (#655 )Published by js87zz about 5 years ago
Published by js87zz about 5 years ago
const grid = new Grid({
// ...options
columns: [{
// ...columns
validation: {
dataType: string | number,
required: boolean,
min: number,
max: number,
regExp: string,
validatorFn: Function
}
}]
})
const grid = new Grid({
data,
column,
pageOptions: {,
// to use the client pagination, should set `true`
useClient: true,
// data count per page
perPage: 10
}
});