pupudu / window-table Goto Github PK
View Code? Open in Web Editor NEWWindowing Table for React based on React Window
Home Page: https://window-table.netlify.com/
Windowing Table for React based on React Window
Home Page: https://window-table.netlify.com/
Given following code:
<WindowTable
columns={[
{ key: 'id', width: 50, title: 'ID'},
{ key: 'detail', width: 150, title: 'TAGS', Component: renderTags},
{ key: 'detail', width: 150, title: 'KEYWORDS', Component: renderKeywords},
]}
data={data!.articles}
/>
Got following warnings:
Warning: Encountered two children with the same key, `detail`.
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.
Tried key: detail.tags
no luck..
Thanks!
Thank you for this awesome library, it saves a lot in performance for my app.
I have an issue when using the Html5Table component with Bulma however, and I cannot pinpoint the issue. The outer div which contains the table header and auto-sizing table appears to have an incorrect height, which has the side effect of showing a Y scrollbar (shown in Ubuntu 20.04 + Firefox 79).
In my app it appears to be the extra height of the table header row, but in this reproduced example it does not look like that is the case. When removing the Bulma styles, it works as it should.
Is there something in Bulma's CSS that is knocking the auto-sizer off course? I have tried eliminating the rules one-by-one to get the culprit to no joy.
Thank you.
The table works well since i follow the documentation https://window-table.now.sh/
But for now i'm thinking to add some event handler in table's rows such as onClick handler
as far as i see the documentation i don't get the event handler, is that possible to add some event with this module?
Thanks in advance
Hi there, amazing library you've built out!
One of the things that's really important for us is the ability to have an infinitely scrolling list. I'm thinking it might be possible to implement this with a sub-component that triggers an event to the parent on mount, but I'd love to know if anyone has implemented this already?
I am having issues with the HTML5Table component when the data
prop is updated.
Console error (Firefox):
react_devtools_backend.js:6:7472
Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`AutoSizer`). To locate the bad setState() call inside `AutoSizer`, follow the stack trace as described in https://fb.me/setstate-in-render
in AutoSizer (created by Measurer)
in Measurer (created by ForwardRef)
in div (created by ForwardRef)
in ForwardRef
in ForwardRef (created by Html5Table)
in Html5Table (created by EditableTable)
{...snip...}
React 5
Measurer window-table.esm.js:438
render window-table.esm.js:382
React 8
unstable_runWithPriority scheduler.development.js:653
React 6
componentDidUpdate EditableTableUI.js:107
Code below:
WindowTableTest.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Html5Table} from 'window-table';
/**
*
*/
class WindowTableTest extends Component
{
constructor( props )
{
super( props );
this.state = {
items: this.props.items,
tableData: [],
tableColumns: [],
};
}
componentDidUpdate( prevProps, prevState, snapshot )
{
const { items } = this.props;
if (prevProps.items !== this.props.items) {
this.setState( {
items: items,
tableColumns: this.buildTableColumns(),
tableData: this.buildTableData( items ),
} );
}
}
buildTableColumns()
{
return [
{
key: 'foo',
title: 'Foo',
width: 50
},
{
key: 'bar',
title: 'Bar',
width: 50
}
];
}
buildTableData( items )
{
return items.map( item =>
{
return {
foo: item.foo,
bar: item.bar
};
} );
}
render()
{
const { tableData, tableColumns } = this.state;
return (
<Html5Table
data={tableData}
columns={tableColumns}
headerClassName="thead"
/>
);
}
}
WindowTableTest.propTypes = {
items: PropTypes.array
};
export default WindowTableTest;
PageTest.js:
import React, {Component} from 'react';
import WindowTableTest from './WindowTableTest';
/**
*
*/
class PageTest extends Component
{
constructor( props )
{
super( props );
this.state = {
items: []
};
}
componentDidMount()
{
// simulate an async request, such as an api call that populates items
setTimeout( () =>
{
this.setState( {
items: [
{
foo: 1,
bar: 2,
}
]
} );
}, 1000 );
}
render()
{
return (
<WindowTableTest items={this.state.items} />
);
}
}
export default PageTest;
Using window-table 0.12.1 and React 16.13.1.
This is a beautiful library!
I noticed that on the codesandbox example and on the website there are extra vertical scrollbars - an outer one that seems like an accident, and an inner one (which is initially hidden behind the outer one!) that actually does the scrolling. I've played around with the table size and css to try to make the outer one vanish, but can't get it to go away. Is it possible to make it disappear?
I tried to using the HTML5 Table
. But, it's appending a duplication of table header
and table body
. It makes sense for having the below one table-header
and table-body
within a separate table
. But, I didn't understand the point of the first one. Thats creating an unnecessary issues if I pass ref to header
and body
. because sometimes it's returns the below table-body
and sometimes above one. Even though I'm interested in the table-body
(below) with the actual values.
Is there any way, I can avoid rendering the first table`?
As of now, all the measurers; table measurer, cell measurer and header measurer are used directly inside the root WindowTable component. It would look cleaner if we move the measurers to its own module.
Currently, the header measurer is embedded in the actual header. It will be better to have another sample header(possibly using the same column titles, or double rendering the header) inside the measurers component.
This would also take the Measurer component and the react-virtualized-auto-sizer along.
Firstly, thanks for your great library! Really performant and smooth!
It just lacks a bit of flexibility.
I wanted to render a table with HTML tags so I pick the HTML5Table component.
Then I realized that the rows are not resized dynamically, which made me export the Row to separate component to measure it.
But passing Row renderer to HTML5Table like below won't work. Really appreciate if you can soon add support for this.
<Html5Table
headerClassName="header"
className="ui profile"
data={profiles}
columns={columns}
Header={HeaderRenderer}
Row={RowRenderer}
rowHeight={getRowHeight}
/>
Hi
Great library!
I'm trying to use the library with Semantic React. Then working through your examples.
So the key bits of code are
import { Table } from 'semantic-ui-react';
//create the custom row component, with click handler
const SemanticRow = ({ row, ...rest }) => {
return (
<Table.Row
onClick={() => console.log(row)}
{...rest}
/>
);
};
//then pass the row to the table
<Html5Table
// ...other props
Row={SemanticRow}
/>
This results in warning, even when I remove all semantic react components
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
So with the additional of
import React, { forwardRef } from 'react';
The following code works raises no warnings
const SemanticRow = forwardRef(
({ index, row, ...rest }, ref) => {
return (
<Table.Row
onClick={() => console.log(row)}
{...rest}
/>
);
}
);
I'm a bit of a React beginner but I had a few questions.
Is the warning raised because the Semantic React Table.Row is a complex component?
Am I going to create performance concerns by passing a complex component in this manner?
Is there a better approach because I could end up with forwardRef nested inside useMemo hooks and then I'm starting to feel a bit out of my depth!!!
Thanks
Tom
Why not adding classnames to div elements, so we can access to them easily if we want add addictionaly styling?
If I add table-bordered to this className attribute, the table starts out with the desired width defined by the parent but then grows quickly overtime (if you inspect, the width keeps increasing). Have you run into this at all? Bootstrap 3.3.7, I'll see if I can make a contrived example on Codesandbox.
<Html5Table
className="table-condensed table-hover table-striped"
data={data}
height={this.props.size.height - 150}
rowHeight={35}
columns={this.columns}
/>
details TBA
Great wee library! Thank you!
I have a question/issue.
I am starting off with an empty table that gets populated. What I find is that the first time we add data, the width is the full size of the screen (there are divs to the right). When I adjust the screen size, then we correctly fit the table into the div.
Am I doing something incorrect to cause the width to be "wrong" first time or am I able to programmatically trigger a measure after I have added data?
When the content is more than table
height, scrollbar appears for the table body, then it breaks the alignment with table-header
and table-body
. You can see this issue in the document example itself. https://window-table.netlify.com/#blazing-fast-
Hi! I'm storing in the state the index of selected row and I color it. But if I scroll the table, the rows are rerendered, so the color on the row disappear. How mantain the color of the selected row ?
Hi, thank you for this great library. I'm facing this warning and dont have any idea about the cause. Could you provide some help? Thanks.
Full warning text:
index.js:1 Warning: Cannot update a component (WindowTable
) while rendering a different component (AutoSizer
). To locate the bad setState() call inside AutoSizer
It says this line in Measurer.tsx causes the warning:
dispatch({ dimensions: [height, width], entity })
Currently, the example website is based on Create React App and is janky. Docusaurus seems to be a good candidate for documenting the library along with examples.
Is there a way I can tell the table to scroll to a given row? For example, I have a table with 20 000 rows and I want to scroll to row number 4500. I couldn't find anything like this in the docs and/or in the issues here.
Hey @pupudu is there a way to use this lib with dynamic col widths or is it best to go with this approach? bvaughn/react-window#60 (comment)
Thanks
Hi @pupudu,
Is there any way we can do dynamic height for dynamic content in the row?
could you please help me with any working example?
the existing one in the document are with some random height.
Maybe done as a part of #6
Currently we decide versions manually. This better be done using semver automation
There are many ways to do those two. So we can either be agnostic or opinionated about them. This is to discuss the pros and cons
Dealing with rollup and babel is hard. tsdx takes care of that for us.
I set some dragging
state on a component wrapping the table, so when I change it, the table re-renders and all rows are unmounted and then re-mounted.
The Row sets event.dataTransfer.setDragImage
in onDragStart, but because it re-mounted, the event target changes and image is not shown. Also onDragEnd doesn't work because of the same reasons.
details TBA
Need to do some research around the templates used by the industry leaders and come up with something simple that would work for us
If using npm install window-table --save
, the lodash dependencies aren't installed with. So when using webpack-dev-server
to build, you'll run into:
ERROR in ./node_modules/window-table/dist/window-table.esm.js
Module not found: Error: Can't resolve 'lodash-es/debounce' in 'C:\...path\node_modules\window-table\dist'
@ ./node_modules/window-table/dist/window-table.esm.js 3:0-42 428:11-19 801:11-19
@ ./src/app.js
@ ./src/index.js
ERROR in ./node_modules/window-table/dist/window-table.esm.js
Module not found: Error: Can't resolve 'lodash-es/isEqual' in 'C:\...path\node_modules\window-table\dist'
@ ./node_modules/window-table/dist/window-table.esm.js 4:0-40 414:9-16
@ ./src/app.js
@ ./src/index.js
If I install the lodash-es
libraries, project builds fine.
Not sure if it's more appropriate to mark them as dependencies rather than peer dependencies, or just make a note in the documentation when installing via npm.
Thanks @pupudu for the component!
Don't forget to add 'react-virtualized-auto-sizer' as a dependency. It's imported, but not in the package.json.
Is there any example of doing sort by column? Anyone has done this? Thanks!
If you add className to Html5Table it applies the classes to the main parent div. It does not apply the classes to the table element.
So when using this with bootstrap, adding table-striped doesn't style the table correctly.
It would be cool if we can add more guides to the guide list in the docs. Currently, there's only the striped-rows guide. From an initial thought, here are some potential guides we can add:
I'm trying out this library for the past few weeks. It's really quite powerful and nice.
But, in terms of accessibility, facing some issues.
I'm looking a flow something like this. Pressing tab it first focus on header
sortable column one after other then focus move to row
. Then I can using the arrow keys I can navigate within the table rows.
Hi! Is there a way to expand some rows on a interaction?
Trying to use this library in storybook ends up with the following exception:
Cannot update a component (`WindowTable`) while rendering a different component (`AutoSizer`). To locate the bad setState() call inside `AutoSizer`, follow the stack trace as described in https://fb.me/setstate-in-render
in AutoSizer (created by Measurer)
in Measurer (created by WindowTable)
in tr (created by HeaderRowRenderer)
in thead (created by THead)
in THead (created by HeaderRowRenderer)
in HeaderRowRenderer (created by WindowTable)
in table (created by WindowTable)
in div (created by WindowTable)
in WindowTable
in WindowTable (created by Html5Table)
in Html5Table
in Unknown (created by Table)
in Table (created by storyFn)
In this method
var Measurer = function Measurer(_ref2) {
var measure = _ref2.measure,
entity = _ref2.entity,
debounceWait = _ref2.debounceWait,
_ref2$innerElementTyp = _ref2.innerElementType,
innerElementType = _ref2$innerElementTyp === void 0 ? 'div' : _ref2$innerElementTyp;
var debounced = useMemo(function () {
return debounce(measure, debounceWait, {
leading: true
});
}, [measure, debounceWait]);
var dispatch = debounceWait > 0 ? debounced : measure;
return createElement(AutoSizer, {
innerElementType: innerElementType
}, function (_ref3) {
var height = _ref3.height,
width = _ref3.width;
dispatch({
dimensions: [height, width],
entity: entity
});
return null;
});
};
On this line:
dispatch({
dimensions: [height, width],
entity: entity
});
When rendering Html5Table receive the following warning in console:
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>. in div (created by AutoSizer) in AutoSizer (created by Measurer) in Measurer (created by HeaderRowRenderer) in tr (created by HeaderRowRenderer) in thead (created by THead) in THead (created by HeaderRowRenderer) in HeaderRowRenderer (created by WindowTable) in table (created by WindowTable) in div (created by WindowTable) in div (created by WindowTable) in WindowTable in WindowTable (created by Html5Table)
<table class="table table-condensed table-hover table-striped" style="width: 566px; margin-bottom: 0px;">
<thead class=" table-header">
<tr class="table-header-row" style="display: flex; position: relative;">
<!-- this comes from where? -->
<div style="overflow: visible; height: 0px; width: 0px;"></div>
<th class="table-header-cell" column="[object Object]" style="width: 150px; display: inline-block; flex-grow: 150;">Name</th>
<th class="table-header-cell" column="[object Object]" style="width: 50px; display: inline-block; flex-grow: 50;">Open</th>
<th class="table-header-cell" column="[object Object]" style="width: 50px; display: inline-block; flex-grow: 50;">Late</th>
<th class="table-header-cell" column="[object Object]" style="width: 50px; display: inline-block; flex-grow: 50;">15m/60m</th>
<th class="table-header-cell" column="[object Object]" style="width: 50px; display: inline-block; flex-grow: 50;">Earliest</th>
<div class="resize-triggers">
<div class="expand-trigger">
<div style="width: 567px; height: 33px;"></div>
</div>
<div class="contract-trigger"></div>
</div>
</tr>
</thead>
</table>
I used the naruto based data for the examples on the website because why not.
However, since we are repeating the same data over and over, it becomes harder to showcase filtering and sorting. Thus, we should migrate the examples to use faker to generate fake data for us.
https://codesandbox.io/s/sorting-in-window-table-forked-wmzhl?file=/src/index.js
<td class="table-cell" row="[object Object]" column="[object Object]" index="0" style="width: 50px; flex-grow: 50; display: inline-block; overflow: auto; box-sizing: border-box;">
<div row="[object Object]" column="[object Object]" index="0">
Demetris
</div>
</td>
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.