erfangc/reacttable

HTML Table with Group By functionality Implemented using Facebook react.js

reacttable's Issues

Table Header issue on filtering

When I do filtering on a column, and if the filter text results in no data points matching, the table header gets messed up. The same thing happens if you attempt to render a table with no data rows.
Is there a work around here?

Please see the screenshot.

Streamline the Internal Implementation of Filter

The previous implementation of the table is actually fairly ripe accommodate the filtering functionality

with the latest few commits we introduced some extraneous states to the TreeNode class. We can consolidate

Example of Redundancy:

 this.display = true; // this determines whether rasterizeTree() will show the row or not
    this.children = [];
    this.ultimateChildren = [];
    this.collapsed = this.parent != null;
    this.sortIndex = null;
    this.hiddenByFilter = false; // therefore this is redundant

The extraneous states is being manipulated or depended on in different parts of the library, which makes it slightly harder to reason about.

Ideally, we should minimize states and streamline dataflow, specifically: filtering should just toggle .display property of TreeNode objects and we will leave rasterizeTree() to determine how to display it.

From that perspective this change should make the code base slightly lighter.

Selection & Callback Bugs #2

Selection impossible when in non-group by mode

Build test suites for the specific functionalities

We need to build unit and end to end testing for

• Sorting
• Filtering
• Subtotaling (summarizing)
• Removing/adding columns

etc ...

The "+" button at the end of the table is broken

In the master version the plus button is now somehow either overlapping the last header cell or exhibiting other behaviors. this is likely the result of the new grand total column at the bottom of the table

Being able to render tree table data directly

By default I believe, react table uses a flat list as the data input with grouping and subtotalling done on the front end. If the data is already grouped and exists in a tree table format, we cannot render it directly using react table. it would be great if we could do so.

Sample data:
[
{
Name: "USA",
Area: 9826675,
Population: 318212000,
TimeZone: "UTC -5 to -10",
children: [
{
Name: "California",
Area: 423970,
Population: 38340000,
TimeZone: "Pacific Time",
children: [
{
Name: "San Francisco",
Area: 231,
Population: 837442,
TimeZone: "PST"
},
{
Name: "Los Angeles",
Area: 503,
Population: 3904657,
TimeZone: "PST"
}
]
},
{
Name: "Illinois",
Area: 57914,
Population: 12882135,
TimeZone: "Central Time Zone",
children: [
{
Name: "Chicago",
Area: 234,
Population: 2695598,
TimeZone: "CST"
}
]
}
]
},
{
Name: "Texas",
Area: 268581,
Population: 26448193,
TimeZone: "Mountain"
}
];

Selection & Callback Bugs #1

Selection disappears when collapsing then collapsing sectors

Group by functionality not working in 3.0.4

After moving from ReactTable 2.2.8 to 3.0.4 the group by functionality has stopped working.

The following warning is displayed in the console log:
Each child in an array should have a unique "key" prop. Check the render method of ReactTable. See http://fb.me/react-warning-keys for more information.

I can confirm that the data does not contain duplicate rows as I added a unique key for each row.
Also tried changing the rowkey option to use the unique key without success.

Installation

HI

Is this plugin available in npm ? And is it compatible with latest version of React i.e 0.14...

Thank you

Server side Pagination

Many existing tables like datatables have server-side pagination. Even though, react table is capable of performing aggregation operations on massive amounts of data on the front end, it would be a great feature since sending huge amount of data over network might clog the bandwidth, thus need to be able to perform sorting or summarizing in the backend.

Buttons for expand/collapse all

Excel functionality does not work for large data

Tried exporting to excel for a dataset with 12000 rows and 12 columns.
It causes chrome to crash.

Un-jquery-ify table resizing

Sector Level Sorting

currently sorting only works on the detail level. client code can pass in custom sort routines through the sort property to columnDef objects

the callback function is then called by the internal master sorting function sorterFactory() see SortUtil.js

inside the master sorting routine you will see that sector sorting takes a callback as well.

currently the default implementation for sector sorting only sort on sector path. (since we need sector paths of summary rows to be in the correct order to render the table correctly, i.e. a child summary row is always suppose to come after the parent summary row in the data array)

the challenge here is to be able to sort both on sector path and by some arbitrary criteria (such as the aggregated value of a column)

replaceData no longer available in 3.0.4.

Does a reactTable function exist which allows the data to be updated?
In version 3.0.4 the replaceData function no longer exists. Looking at the code I can't find anything
which performs a similar function.

Selectively Disable Features

Selectively Disable:

Add Button
Remove Button(s) in the Menu
The Ability to Summarize
Sorting
Disable Grand Subtotaling

Multi-Column Filter

Need an Input box on each column(on a right click or any other operation) which will have the dropdown list of all the distinct values for that column.When a user selects a particular value, then the table should only show rows havingthe column value equivalent to the filter.

Adding methods to perform filter operation on a particular column

There can be multiple scenarios in which you want to filter on a column in other ways than writing the text in a search box, for example, double clicking on a cell content.

column headers does not resize with window resize

may just need register to listen to window.resize events when the component mounts?

Slowness of the master

the current table seems significantly slower than before, as discussed with @wenjiechen this appears to be caused by adjustHeaders()

we either have to reimplement the header and grand total footer using a method that does not rely on adjustHeader() OR we have to investigate why adjustHeader() is suddenly slowing the widget down significantly more than before

Refactor / Rename + Sustainability Enhancements

new branch created to incorporate the following changes

• adopt font-awesome as the default icon provider
• improve infinite scrolling to ensure high performance throughout the scroll
• remove old classes/components
• rename things that no longer make sense
• factor out custom menu item creation - right now this is hard-coded to create infoBoxes only - we need the ability to create custom menu items as react components
• *** clean up states and props ***

Images/Hyperlink in Cell

Need cells which can support hyperlinks or images.

First column width not consistant

Other columns are fine

Resizing window should re-adjust header widths

Not responsive to change in the window size

display large numbers in thousands

selectedKeys not implemented

{..., selectedKeys: value, ...}

value should be an array of "rowKey"s so when the table is created, it will have rows selected automatically that may have been previously selected

Multi Column Sort

Need to be able to sort on multiple columns.

enhance the look and feel

enhance look and feel since bootstrap dependency has been removed

• de-couple styling into standalone css instead (use class names in the table JS instead of in-line styles)
• create default look and feel through ReactTable.css

Cell callback

Row callbacks work but we need to perform cell specific operations if the user clicks on a particular cell of the row like right click or double click on a cell which will work as a filter, etc..

Calls to replaceData do not maintain current sort state

Export to PDF or Excel

When column ordering dynamically changes, "grand total" tag floats around with columns

moment() is undefined in DataAggregation.js

this causes subtotal by date field failure. please look at this issue

Sorting: Blank cells should be at the end of cells with data in sorts regardless of sort direction

i.e. An ascending numerical sort can end up as ["","","",100,150,200]

Group by on startup adds Slashes on the column header

There should be group by option when initializing React table itself to avoid the // on the column header.

New feature -- Multiple level sorting

count_and_distinct counts zeros and/or blank data towards unique total but not count total

Anomalies such as (64/63) occur if you have a field without data

Formatting of Columns

To provide custom formatting or having a format mapper which maps to shortcuts

Aggregation callback

Aggregating/de-aggregating tree will call custom callback with aggregation state if passed in upon initialization

First column doesn't obey formatInstructions object

Data is left unformatted

add ajax api for generate large size excel

in the front end, experotToExcel can't handle large size of data. we can add an ajax api to send the data to backend and generate download excel. If this api defined by user, we call this api, otherwise we use experotToExcel method.