komarovalexander / ka-table Goto Github PK
View Code? Open in Web Editor NEWLightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Home Page: http://ka-table.com
License: MIT License
Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Home Page: http://ka-table.com
License: MIT License
Modified search example to include a participant named "Falsey False".
Searching for the score "false" produces a bug, where the row with Falsey False is shown twice.
See here:
https://stackblitz.com/edit/table-search-js-bbjoov?file=Demo.js
Console error:
Warning: Encountered two children with the same key, `7`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted โ the behavior is unsupported and could change in a future version.
in Rows (created by VirtualizedRows)
in VirtualizedRows (created by TableBodyContent)
in TableBodyContent (created by TableBody)
in tbody (created by TableBody)
in TableBody
in table
in div
in Unknown
in div
in Unknown (created by SearchDemo)
in SearchDemo (created by App)
in div (created by App)
in App react-dom.development.js:70:42
Steps to reproduce:
virtualScrolling: { }
to the table optionstype: bug
version: 3.2.1
react: 16.13.1
There is a bug, when using Custom Editor for some inputs
While adding new row, when value in custom editor saved it proceed new row with values of custom editor.
when adding this piece of code paging: { enabled: true, pageIndex: 1, pageSize: 10, },
from demo, run into the following error - Cannot update a component (KaTable
) while rendering a different component (PagingPages
). To locate the bad setState() call inside PagingPages
, follow the stack trace as described in https://fb.me/setstate-in-render.
Passing the total number of elements like so
useEffect(() => { dispatch(updatePagesCount(props.total)); }, [props.total]);
Recently, I received a requirement to show a tooltip
for each row that will show a description. But it seems that it's not possible to do it right now. It will be nice to have rowProps
prop to customize each row of the table. In addition, it would be useful, for example, to change the background color depending on the row data. I know that there is an example showing additional data at the bottom of the table, but it does not feet the client requirements. As a workaround, I can wrap each cell and define a tooltip, but it would be better to avoid this solution.
Is it possible to implement it with an existing API? If not, it would be great to have this:
rowProps={({ rowData }) => ({ title: rowData.description })}
Is it possible to define a key prop using lodash-like dot paths syntax to reference nested values?
Column has a cell option and grid has dataRow option, a similar option should be for groupedRow
Try to filter by 'Name' column in this demo:
https://stackblitz.com/edit/table-filter-row-ts-yzdcfn?file=Demo.tsx
An error will occur:
'Cannot read property 'toLowerCase' of undefined'
Expected behavior:
The table should filter data by field name not the key (in case if the field is specified)
At this time there is no way to show data nested fields, it should be supported this way:
const data = [{
representative: {
name: 'Alex'
}
}, {
representative: {
name: 'Mike'
}
}]
const tableOption: ITableOption = {
columns: [{
field: 'name', // field name
key: 'representative.name', // just an unique value
fieldParents: ['representative'] // this value contains names of parent fields (for acces to nested field)
}
],
//...
};
<Table {...tableOption} data={data} />
I would like to implement my own edit feature where each row would have a react-bootstrap button which, when clicked, would launch a modal dialog box that I implement.
Do I use events to do this? How to I add a column of react buttons?
Thanks, and ka-table is fantastic. Thanks for creating it.
Hi,
Sample fork here: https://stackblitz.com/edit/react-sg3yxj?file=src%2FApp.js
I'm trying to fetch table from db & perform crud operations. Initially table is empty, user creates a row. After that when user trying to save the records in db, I'm getting empty row in the getData method.
In my development code it's just prints empty array while I can data in table in UI.
Similar case with above demo link. However I after it's printing empty array, another rendering happens and if I'm debugging, I can see data property with rows. But that rendering goes with error message.
Edit: If I move the save action inside the dispatcher, I can see the rows in the prevstate property. I have changed the dispatch into the following way.
changeTableProps((prevState) => {
var props = kaReducer(prevState, action);
if (action.type === SAVE_GRID) {
saveData(props.data);
}
return props;
});
I guess this is how I need to access data. Am I doing it correctly? kareducer is returning updated data, but I guess UI render for this action will be asynchronous. So is it fine to use the reducer return value?
Hello @komarovalexander, this is a question/request for enhancement, here is the scenario I would like to achieve:
Paging
component), which makes sense when the user has a large table with Paging
activated, he shouldn't navigate till the bottom in order to change the page;As enhancement, I am thinking why not giving the possibility to put Paging
component wherever we want (for example in the top rather than the footer).
This could be achieved if Paging
component is extracted and not tightly coupled to Table
component.
Thanks in advance!
Hi! I'm trying to implement the new features from 6.8.0 (custom Filter logic and custom Sorting logic), but the functions don't appear to be called when I sort any column ๐ค
I have custom components for the Head cells, and I trigger an dispatch(updateSortDirection(column.key))
like this:
return <KaHeaderCell onClick={() => { dispatch(updateSortDirection(cellProps.column.key)) }}>
<div className='title'>{cellProps.column.title}</div>
{thisColumn.icon && <Icon source={thisColumn.icon.source || 'far'} icon={thisColumn.icon.name} />}
<SortIcon direction={cellProps.column.sortDirection} />
</KaHeaderCell>
which works great using the default sorting function (here we can see a "sort ascending" icon, and the sorted data works fine):
But when I add the sorting function or filter function in the tableProps like this:
they seem to be "ignored" by the table, it works using the default sorting mechanism.
I'm not even attempting to custom sort right now, it's just a console log to see if it reaches that line, but it never gets called.
When I attempt a codeSandbox with the most basic ka-table configuration, it works fine (console.logs my message), so I'm guessing there is an additional configuration needed to be done, but can't figure out which one.
do you know of some config that I may be ommiting that "skips" the custom sorting / filters?
Everything else seems to work fine (custom headers, custom cells, cellTexts, styles, etc)
Hi! thanks for your efforts and this library!
I'm on the middle of implementing it in a project of mine (and doing great with it), but I came to a problem to which I cannot find an answer from de demos:
Imagine you have a table with data like this:
const tableData = [
{name: 'Rafael', age: 10, group: {id: 2, name: 'Developer'}},
{name: 'Alex', age: 20, group: {id: 1, name: 'Admin'}},
...
]
As you can see, the "group" field is of object type, not a scalar.
I am trying to add a custom RowFilter like this:
(I am referring to the last column, with a "Unidades" header)
In this case, the column shows "Units" information but the rough use case is the same.
I cannot find a way to implement that column filter, because the actions provided (updateFilterRowValue
) only let me change the "value" of the filter but not the comparation function.
example, I can set "value" to {id: 2, name: "Developer"}
, but the ka-table internally doesn't seem to know how to handle that kind of data.
Something like the "search" function passed in the props would be great, so I can do something like:
function customFilter(cellProps) {
if (cellProps.column.key === 'Group') {
// allows me to return a function that will handle the filter in this scenario,
// but keeping the default filtering system otherwise:
return (filterValue, cellValue) => filterValue.name === cellValue.name
}
}
Is there a way to implement this?
I have also found the "extendedFilter" function, but it seems to take only the tableData as parameter, and not the filter value or the column configuration, so it's kind of hard to use in this case.
Resuming:
The use case is having a rowFilter which displays a Select component, and each cell in that column also has a Select component.
The filter might be a Simple select (exact match) or a MultiSelect (pick N items), and each of these cases probably would require specialized filter functions, which I should provide
https://stackblitz.com/edit/table-column-resizing-js-6xtzc3?file=Demo.js
This also causes the other columns to resize. This is not an issue if the table is scrollable.
Hi @komarovalexander. I'm trying to do both virtual scrolling (i have table with 10k+ rows and dynamic row height) and making scrollbar not part of header. That is what i have right now sandbox. Maybe you can help me. Thanks
Thanks for the great job to make this library available! It is loaded with awesome features, I think it would be really nice to have select input (like all paginated tables offer) to configure the number of rows per page. Looking at documentation and examples I don't see such option.
Hello, thanks for the great library! so far it has been working without problems.
I have a question, is there a way to customize the behaviour of the table for the "create row" and the regular rows independently?
the use case is:
imagine I have 4 fields:
I want to be able to set those 4 fields when creating new rows, but when editing existing rows, I want to disable editing in some of them, so the behaviour would be like this:
is there a way to complish this from the tableProps?
The only workaround I have found is to implement custom cells for each column and manage a lot of logic inside the custom cell.
For default cells I think this is a little bit overkill, is there a way to accomplish this in a more clean way, with the tools provided from ka-table?
Is there any method/event to extract data from the table?
For example:
if we use search, filter or something like that then we can't get back filtered data from the table to our component.
Can you help with that?
Thanks.
Hello :). Been using your light-weight component for a few weeks now. It's been a nice experience. Good work! :). Love the hassle-free, declarative setup you created.
I'm still new to React and perhaps I'm missing some key JavaScript concepts... but... I'm having some trouble easily hiding columns.
As you indicate in the docs, I'm using an object to initialize the table. But if I want to hide a column, the only way I could think of is to pass in a different initialization object. Ideally, I'd say a column should have a visible property that can be changed with via the childComponents object.
Hey @komarovalexander ,
It's just a question, but is there a way that I can filter my rows and click on 'Select All' checkbox and select just the items that is on the table in that moment?
Idk if i'm clear enough, here's an example:
I have a table with 2 column's: Restaurant Name and City, in that table I filter by city typing a city name that I have a lot of restaurants (5-9 pages) and I want to click on 'Select All' checkbox to select that specific 5-9 pages of restaurants.
Hello @komarovalexander
I found that the interface IHeadCellProps
isn't fully typed. These props are used in childComponents -> headCell -> elementAttributes
export interface IHeadCellProps {
areAllRowsSelected: boolean;
childComponents: ChildComponents;
columnReordering?: boolean;
columnResizing?: boolean;
column: Column;
dispatch: DispatchFunc;
sortingMode: SortingMode;
}
Many thanks, Dmytro
To have an access to paging component in order to customize styles, etc.
Currently, the onchange event handler conditional for the checkbox input is set to:
if (event.currentTarget.checked) { dispatch(ActionType.SelectRow, { rowKeyValue }); } else { dispatch(ActionType.SelectRow, { rowKeyValue }); }
https://stackblitz.com/edit/table-selection-js?file=Demo.js
Should be like in the TS example:
if (event.currentTarget.checked) { dispatch(ActionType.SelectRow, { rowKeyValue }); } else { dispatch(ActionType.DeselectRowData, { rowKeyValue }); }
https://stackblitz.com/edit/table-selection-ts?file=Demo.tsx
(Loving the component btw. Has just the right set amount of features built in to get going.)
Hello @komarovalexander !
First of all, I want to thank you for the awesome and easy to use library.
It covers all my needs but I found one little thing:
If I enable both options resizable and draggable for a column, an event handler works in an unexpected way. When I try to resize a column dragging starts
Code example:
https://stackblitz.com/edit/table-column-reordering-ts-5kz3m4?file=Demo.tsx
It is the same as your example https://stackblitz.com/edit/table-column-reordering-ts?file=Demo.tsx, except line 15
in Demo.tsx
Best regards, Dmytro
Custom Cell demo does not show all the power of this grid. There should be more real business case together with charts in cells and maybe some tooltips.
Hi,
I have created a table which displays a bunch of numbers in individual rows and last row displays a sum of those numbers. I need to format that row particularly so as to make it bold or add some border. Is there a row level formatting that I can specify?
Thanks.
Deselect from the range of selected items. For example, selected 100 items and I want to deselect from 20 to 40th element.
Hey there,
I would like to know how I can insert a filter in SelectionHeader to order by selected rows and deselected rows, a ordernation just like the other fields with the arrow down and arrow up, is there an easy way to do so?
Open demo https://stackblitz.com/edit/table-custom-cell-js?file=data.js and change data in the first row
To give ability to filter by null & undefined & empty string values
If there is '.' in the field name then property data will not be shown
TableProps = {
columns: [
{ key: 'column1.one', title: 'Column 1', dataType: DataType.String },
{ key: 'column2.two', title: 'Column 2', dataType: DataType.String },
{ key: 'column3.three', title: 'Column 3', dataType: DataType.String },
],
data: [
{key:"column1.one", title:"Column 1", dataType:"string"},
{key:"column2.two", title:"Column 2", dataType:"string"},
{key:"column3.three", title:"Column 3", dataType:"string"},
],
rowKeyField: 'id',
sortingMode: SortingMode.Single,
};
Can you make the ability to multiselect range of elements? For example I have 100 elements, I wanna select from 5th to 60th element. Expected behavior - clicking the element I want to start select, then pressing shift and the which to I wanted to select. Kind of slice method.
Would be nice to be possible to add a total number of pages together with the current index.
This way Server-sided pagination is possible, useful and needed for Rest API data.
Usage example :
https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/
Hey, awesome project! really covers almost all use cases for a datatable.
I was checking the multiple selection demo ( https://stackblitz.com/edit/table-selection-js?file=Demo.js ) and it works well as long as rowKeyFiled : "id", once you change the value of the rowKeyField and update it in the data array, the selection stops working properly.
This is what I'm trying to achieve ( https://stackblitz.com/edit/table-selection-js-lty3ay?file=Demo.js )
Not sure if this is a bug or I'm missing something.
Thanks again for the awesome library!
Hi, great project! looking forward to use it and give feedback about it ๐
I was looking at the demos (specially, the "focus" one) and it works fine, I just have this question.
The keyboard navigation in that demo seems very simple (iterate on each tab press, each row cell, then jump to next row).
Is there a way to turn it to a excel/google sheets navigation?
In this case, you could move around the table with the arrow keys, with Enter key go to edit mode and so on (maybe even navigate to last row/column with ctrl+arrows or move between pages if paging enabled somehow).
what could be the best approach to achieve this?
is feasible in the current state of the library or new features should be implemented in order to make it possible?
I have a scenario, where I need to add a new row and get user input only for few cells & other should have some default value at runtime. (e.g. new row created time)
The default value for cell is being read by rowData
in CellComponent. But NewRow
initialize this to empty object and I see no way to pass from a prop.
I may be missing a way to implement this if it's already available. If not, please add support and provide a demo.
Thanks.
We can't add new row when table haven't data.
Hello @komarovalexander ๐
It would be great if you could add minimal width
property for resizable columns which would specify width between two ends of a column despite what is inside
In my opinion, it could be even a config object to left some space for future developing like a
type Resizable =
| {
enabled: boolean;
minWidth: number;
maxWidth: number;
}
| boolean;
Thank you!
Hi!
I'm using the library and works great and is easily customizable ๐
I'm not sure if this is a ka-table performance issue or a pattern could be used to help improve performance (useMemo or the like):
The table works super fast when using the default example with my custom styles:
But just after I add some custom cell to the table, I run into performance issues (it slows badly, even with a small amount of rows):
I am using this pattern to add the custom cell:
<Table
{...tableProps}
dispatch={dispatch}
childComponents={{
cell: {
content: (cellProps) => {
if (cellProps.column.key === ':inline-actions') {
return <Grid columns={2} space='xxs' gap='xxs'>
<Button variant='ghost' space='xxs' ><Icon source='far' icon='edit' /></Button>
<Button variant='ghost' space='xxs' ><Icon source='far' icon='trash' /></Button>
</Grid>
}
}
}
}}
/>
The amount of time to interact with every header sorting, scales from 6 seconds, to 10+ seconds (manual tests).
Is there a way to pass the custom cells straight into the data array to avoid running the logic inside cell.content for every cell?
At startup point I already know that I will render that couple of buttons on each last column's cell, and I think recalculating the needed component every time is causing this performance issue.
Probably Allowing to add custom cells directly to the Data array would allow to generate them at start time, boosting the performance.
Do you have any suggestion regarding this topic?
Hi I was trying your component and try to figure out a way to trigger scroll to some row but didn't figure out a way by the row index, so looking the code see that I can sent the scrollTop inside of virtualScrolling, but when I try it insted of scroll I get a white space in the start of the table.
Here u can check how I'm trying to implement the scroll to row.
https://stackblitz.com/edit/table-many-rows-js-7cuk5c?file=Demo.js
The promise of ka-table is to be able to customize every table html element, currently styles of tbody element are hard coded to use the default options.
Full error message: node_modules/ka-table/Reducers/kaReducer.ts(77,20):
Property 'text' does not exist on type '{ enabled: boolean; } | { enabled: boolean; text?: string | undefined; }'.
Property 'text' does not exist on type '{ enabled: boolean; }'. TS2339
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.