komarovalexander / ka-table

Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more

The customizable, extendable, lightweight, and fully free React Table Component

Site | Demos | Docs

Demo link

Installation

npm

npm install ka-table

yarn

yarn add ka-table

Usage

Basic example

import 'ka-table/style.css';

import React from 'react';

import { Table } from 'ka-table';
import { DataType, EditingMode, SortingMode } from 'ka-table/enums';

const dataArray = Array(10)
  .fill(undefined)
  .map((_, index) => ({
    column1: `column:1 row:${index}`,
    column2: `column:2 row:${index}`,
    column3: `column:3 row:${index}`,
    column4: `column:4 row:${index}`,
    id: index,
  }));

const OverviewDemo = () => {
  return (
    <Table
      columns={[
        { key: 'column1', title: 'Column 1', dataType: DataType.String },
        { key: 'column2', title: 'Column 2', dataType: DataType.String },
        { key: 'column3', title: 'Column 3', dataType: DataType.String },
        { key: 'column4', title: 'Column 4', dataType: DataType.String },
      ]}
      data={dataArray}
      editingMode={EditingMode.Cell}
      rowKeyField={'id'}
      sortingMode={SortingMode.Single}
    />
  );
};

export default OverviewDemo;

Example link

ka-table's Issues

Add dynamic page size selection

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.

Question - Unable to extract data out of table

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?

The scrollbar should not be a part of the header

The scrollbar that takes the entire height of the table does not look very good compared to the scrollbar that only takes the height of the body. Is it possible to return the previous behavior as it was in all versions 4 and below?

Access to paging component

To have an access to paging component in order to customize styles, etc.

Selecting items according to their filter

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.

A new row cannot be added to an empty table

We can't add new row when table haven't data.

example

Add 'Overview' Demo to show main features on one page

Allow style customization for tbody element

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.

Table selection JS example bug

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.)

Question: Is there a way to navigate the table with key arrows?

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?

Order by Selected Rows

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?

Custom search bug - multiple children with the same key

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

Resizing column "jumps" when all column widths add up to less than 100% of table width

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.

Add Server-side Pagination option to Pagination

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/

Data nested fields support

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} />

VirtualScrolling.scrollTop not working as expected?

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

Add IsEmpty & IsNotEmpty filterOperators

To give ability to filter by null & undefined & empty string values

How to format a row selectively

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.

How to add normal react button to each row

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.

Table does not show data with dots in the property name

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,
};

Virtual scrolling + dynamic row height and scroll not an part of header

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

Filter Row throws an error in case if field is different with column key

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)

How to pass additional props for <tr />?

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 })}

Adding New Row with default value

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.

While adding row with custom editor, updateCell creates row below.

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.

column.format option should work for grouped column value

this code
format: (value: boolean) => { return 'Loyal Program: ${value ? 'yes' : 'no'}'; },

instead of

should return formatted value

How to extract data from the 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.

Implementation of mutiselect range of elements in table

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.

Warning when adding pagination info to tablePropsInit

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]);

Provide more control on paging component

Hello @komarovalexander, this is a question/request for enhancement, here is the scenario I would like to achieve:

• Be able to scroll the table only with fixed footer (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;
  I have tried to hack around CSS of different native table elements but couldn't achieve this. Do you have an idea if it is feasible?

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!

Scrolling flickers when using virtual scrolling

Steps to reproduce:

1. add virtualScrolling: { } to the table options
2. populate the table with a small amount of data
3. try to scroll almost to the top or almost to the bottom

type: bug
version: 3.2.1
react: 16.13.1

Question: Performance issues

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 problem

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?

Question: Filter and Sorting logic

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)

Question: independent config for column isEditable (create vs update)

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:

• email
• name
• last name
• age

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:

• email: create only
• name: update/create
• lastName: update/create
• age: update/create

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.

• is the cell in edit mode? is it a New row or a regular row? which external option did I pass? (create/update), etc.

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?

Table throws an exception after change data in the first row if all data is in ISO 8601 string format

Open demo https://stackblitz.com/edit/table-custom-cell-js?file=data.js and change data in the first row

Nested data support

Is it possible to define a key prop using lodash-like dot paths syntax to reference nested values?

Question: Filter rows with complex data based on Select component

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

Deselect range with shiftKey

Deselect from the range of selected items. For example, selected 100 items and I want to deselect from 20 to 40th element.

Add horizontal scroll bar in case of many columns

This scroll should also scroll the header

Column resize bug

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

Multiple Selection does not work for any "rowKeyField" value other than "id"

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!

Type issue in kaReducer.ts on line 77

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

Add ability to customize template for grouped cell

Column has a cell option and grid has dataRow option, a similar option should be for groupedRow

Cell Props

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

Improve 'Custom cell' demo

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.

Minimal width for resizable columns

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!

Any way to hide a column?

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.

ka-details-row td should have colspan

Add ability to show custom message in case of no data in the table

Table throws an error while search by data if there is null value in the cell

https://stackblitz.com/edit/table-search-js-az1ypk?file=Demo.js
https://stackblitz.com/edit/table-filter-row-js-zh3w7a?file=Demo.js