schrodinger / fixed-data-table-2 Goto Github PK
View Code? Open in Web Editor NEWA React table component designed to allow presenting millions of rows of data.
Home Page: http://schrodinger.github.io/fixed-data-table-2/
License: Other
A React table component designed to allow presenting millions of rows of data.
Home Page: http://schrodinger.github.io/fixed-data-table-2/
License: Other
The fixed-data-table does not render with matching markup on the server and client.
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) ight:32px;z-index:1;transform:translate3
(server) ight:32px;z-index:1;left:0px;top:0px;"
Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.
We will probably need to change the code to always render with top and left on the first pass then use translate if the browser supports after that.
facebookarchive/fixed-data-table#44
I may send a pull request if I get a chance to fix it myself, but I figured I'd report it nonetheless.
Edit: this PR seems to be a reasonable solution facebookarchive/fixed-data-table#308
The columnKey prop is passed to the underlying children and react now moans about it.
Warning: Unknown prop `columnKey` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
no warning
warning
React 15.3.1
If table has not any record, show message "No records" in the table body
Message in table when table is empty
Showing only header cells
Put some span with text to body, something like:
<span>{this.props.emptyDataMessage}</span>
to file https://github.com/schrodinger/fixed-data-table-2/blob/master/src/FixedDataTable.js:
render() /*object*/ {
...
return (
<div
className={joinClasses(
this.state.className,
cx('fixedDataTableLayout/main'),
cx('public/fixedDataTable/main'),
)}
onWheel={this._wheelHandler.onWheel}
onTouchStart={this._touchHandler.onTouchStart}
onTouchEnd={this._touchHandler.onTouchEnd}
onTouchMove={this._touchHandler.onTouchMove}
onTouchCancel={this._touchHandler.onTouchCancel}
style={{height: state.height, width: state.width}}>
<div
className={cx('fixedDataTableLayout/rowsContainer')}
style={{height: rowsContainerHeight, width: state.width}}>
{dragKnob}
{groupHeader}
{header}
{rows}
{footer}
{topShadow}
{bottomShadow}
</div>
{rows.length ? "" : <span>{this.props.emptyDataMessage}</span> }
{verticalScrollbar}
{horizontalScrollbar}
</div>
);
},
It will more usefull when table will empty. For now we have implementation like div under the table, and have more problem with resizing page, or etc.
Functional like this, there is in a lot of table components.
Hello! Is there a version for react 15.3.2 ?
I used version 0.6.1 fixed-data-table before, but there is a warning about div and columnKey.
I know that fixed-data-table-2 seems solved this question.
After installed the fixed-data-table-2, there is a conflict caused by version.
How do I solve the question?
Thanks very much!!
Can you update react version like below?
"peerDependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1"
}
BTW, I just fork this, and try to install from my repository.
And there is an error in my browser.
internal/FixedDataTableRoot.js
Error: XHR error (404 Not Found) loading
I know the file is generated from npm run build-npm
, but how can I do after npm install?
I migrated our fixed-data-table project over to use the fixed-data-table-2 with the new touchScrollEnabled feature and the scrolling with momentum on mobile devices is awesome. However I was experiencing an issue where the onClick
handler on my cell component wasn't getting called.
I ended up commenting out the event.preventDefault()
lines in the onTouchStart and onTouchEnd functions in ReactTouchHandler.js. That fixed the problem for me and as of yet has not caused any additional issues I have noticed with the scroll functionality.
I mainly just wanted to highlight this in case it's useful. I'm also curious though, is it an issue that other people have noticed, or is it perhaps getting caused by some conflicting code specific to my project? Also i'm curious if there are expected consequences I should be aware of due to disabling the event.preventDefault functions in onTouchStart and onTouchEnd.
Thanks!
I believe that it makes sense to add a data
context to the Table element. As all data should have the same source it makes sense that all child nodes of the <Table>
have access to the same data-source. This makes sense as there is a strictly hierarchical nature: table -> column -> cell. One could also store column within context with the same argument. I'm aware of that context is advised against, but it seems like the most natural place to add this and it does seem to have a certain degree of maturity.
As I've been trying to convert the data-filtering example to a more general solution, context seems to be an interesting alternative. In the example they store the data in this.state.filteredDataList
. While this works I run into issues when children are specified outside the class, here's a basic example:
class FilterTable extends Component {
....
render() {
....
return (
<Table
rowHeight={50}
rowsCount={data.getSize()}
headerHeight={100}
width={1000}
height={500}
{...this.props}
>
{children}
</Table>
)
}
}
I would like to then be able to design a FilterTable component that looks something like:
<FilterTable
rawData={myData}
filters={this.state.filters}
{...props}
>
<Column
header={
<FilterHeaderCell
placeholder="name"
onChange={e => this.onChangeFilter('name', e)}
value={this.state.filters.name}
>
Name
</FilterHeaderCell>}
cell={<TextCell col="name" />}
width={100}
/>
</FilterTable>
The problem is that since myData
is filtered inside the <FilterTable>
component the child <TextCell>
doesn't have access to the filtered list. I've tried adding filteredData
to my Redux store but I got into an eternal loop-issue and it doesn't seem like the store should have to worry about the filtering within a table.
The TextCell implementation shouldn't be that tricky:
import React, { PropTypes } from 'react';
import { Cell } from 'fixed-data-table-2';
const TextCell = ({ rowIndex, col, ...props }, { data }) => (
<Cell {...props}>
{data.getObjectAt(rowIndex).get(col)}
</Cell>);
TextCell.conextTypes = {
data: PropTypes.shape({
getObjectAt: PropTypes.func.isRequired,
}).isRequired,
};
TextCell.propTypes = {
rowIndex: PropTypes.number,
col: PropTypes.string.isRequired,
};
export default TextCell;
It should be easy to apply custom styles to the grid.
The default styling does too much and is not well organized. This makes it difficult apply custom styling in many cases. A few examples are:
Wraps on default cell make styling hard. Can't style the border of FixedDataTableCellDefault
Also when table width > total column width, it's difficult to style the extra header space.
Consider making default styles into themes which can easily be applied or removed depending on the needs of each use case.
The repo looks broken because of it
When I tray to reorder my column the speed of the scrolling bar is very slow,.
It think will be better if the speed value of the scrolling bar is passed by props.
Hello,
Now I am implementing hidden columns using your example. And I've noticed that after removing one column, next columns keys were regenerated.
Column keys should not be regenerated on each render.
Column keys are generated on each render.
I have tried allowCellsRecycling=true but after removing column keys were regenerated because next columns move one position left.
I'd propose to update component without key regeneration or/and provide separate key parameter in Column component.
https://github.com/schrodinger/fixed-data-table-2/blob/master/src/FixedDataTableCellGroup.js
render() {
...
for (var i = 0, j = columns.length; i < j; i++) {
var columnProps = columns[i].props;
var recycable = columnProps.allowCellsRecycling && !isColumnReordering;
if (!recycable || (
currentPosition - props.left <= props.width &&
currentPosition - props.left + columnProps.width >= 0)) {
var key = 'cell_' + i;
cells[i] = this._renderCell(
props.rowIndex,
props.rowHeight,
columnProps,
currentPosition,
key,
contentWidth,
isColumnReordering
);
}
currentPosition += columnProps.width;
}
...
}
I created table with header filters and hidden columns functionality. After filters were applied I started to hide column - all columns after that were recreated as a result filter's state was cleared.
Thanks for starting this repo! Any plans to support touch scrolling natively? This was a common question in the original issue tracker.
For reference:
facebookarchive/fixed-data-table#403
facebookarchive/fixed-data-table#365
facebookarchive/fixed-data-table#26
Experiencing this exact issue facebookarchive/fixed-data-table#292 in this repo also.
onContentHeightChange
should always get called if any of the rows grew in height
The first time rowHeightGetter
is called it always returns the rowHeight
value because the rows haven't been rendered yet. Once the rows have been rendered it gets called again and the row height updates (there's about a 500ms delay however) but onContentHeightChange
does not get called again, and so if any of the rows grew in height, the table cuts them off at the bottom.
Trying to implement dynamic row heights based on cell values and have the table update its height appropriately
fixed-data-table-2 0.6.6
react 0.14.8
react-dom 0.14.8
It would be a really convenient feature if I could have onMouse* Events for cells. Say, I want to display an icon as soon as the user hovers over a specific cell, to give a hint, that an action can be performed on the cell.
Right now, I can get these events only for the complete row. The cell or column the user hovers over at that time cannot be reconstructed, as far as I can tell.
Hi,
I'm trying to use the table with cells that you can hover on them and see tooltips. Because of overflow/z-indexing issues I see my tooltips being clipped, and I see other issues with recycling of cells (for example, using https://github.com/wwayne/react-tooltip with a single <ReactTooltip />
wouldn't work out of the box).
After running:
npm install fixed-data-table-2 --save
When I run I get the following error:
ERROR in ./~/fixed-data-table-2/internal/FixedDataTableCell.react.js
Module not found: Error: Cannot resolve 'file' or 'directory' ././FixedDataTableColumnReorderHandle.react in /workspace/myapp/node_modules/fixed-data-table-2/internal
@ ./~/fixed-data-table-2/internal/FixedDataTableCell.react.js 20:40-94
I do not see the FixedDataTableColumnReorderHandle.react.js anywhere.
I was confused on the pagination example because there were a lack of links for pagination (ex. first, last, next, previous, page #). Could you add some documentation for adding pagination to a table?
This is less of an issue as it is a pro-tip. I've noticed that you can style elements of the table by adding a className to the <Table/>
component. However this can get clunky when you have to do some finagling to gain specificity precedence on certain elements. What has worked best for me has been to use "Aphrodite" to accomplish the custom styling. I'm more than happy to build out an example when I get some free time, but it might be something that you folks consider throwing into the docs as an aside for those wishing for a clean, verbose and snazzy way to style the fixed tables.
I'm trying to have both the ability to have a responsive table (grow/shrink based on parent container), as well as the ability to resize any column within the table. As of right now they seem to be mutually exclusive, i.e., I can do one or the other but not both.
Code:
const TextCell = ({rowIndex, data, col}) => (
<Cell>
{data[rowIndex][col]}
</Cell>
);
TextCell.propTypes = {
rowIndex: PropTypes.number,
data: PropTypes.array,
col: PropTypes.number,
};
const layout = {
columnWidth: 100,
};
class MyTable extends Component {
static propTypes = {
labels: PropTypes.array,
data: PropTypes.array,
containerWidth: PropTypes.number,
containerHeight: PropTypes.number,
}
constructor(props) {
super(props);
this.state = {
columnWidths: {},
};
this.onColumnResizeEndCallback = this.onColumnResizeEndCallback.bind(this);
}
onColumnResizeEndCallback(newColumnWidth, columnKey) {
this.setState(({columnWidths}) => ({
columnWidths: {
...columnWidths,
[columnKey]: newColumnWidth,
}
}));
}
render() {
const {
props: {
labels,
data,
containerWidth,
containerHeight,
},
state: {
columnWidths,
},
} = this;
return (
<Table
rowHeight={80}
headerHeight={80}
rowsCount={data.length}
onColumnResizeEndCallback={this.onColumnResizeEndCallback}
isColumnResizing={false}
width={containerWidth}
height={800}
>
{
labels.map((label, index) => (
<Column
key={index}
columnKey={index}
header={<Cell>{label}</Cell>}
cell={<TextCell data={data} col={index} />}
width={columnWidths[index] || layout.columnWidth}
flexGrow={1}
isResizable={true}
/>
))
}
</Table>
);
}
}
export default GetContainerDimensions()(MyTable)
When changing scrollTop
prop, onScrollStart/onScrollEnd functions are called as expected.
The same should happen when passing scrollLeft
prop.
Passing a different scrollLeft
prop value, onScroll*
callbacks are not called.
scrollTop
value is incremented every second. When the value exceeds the max available value, onScrollEnd
will adjust the state variable with the max scroll position.scrollTop
with scrollLeft
) and line 41 (replace y
with x
), the value will continue to grow and grow, exceeding the max available value for horizontal scrolling (onScrollEnd
is never called and state variable is never adjusted)I'm trying to control the scroll using keyboard arrows, saving the scroll state and passing the stored scrollTop
and scrollLeft
to the table at each render.
When trying to pass a scrollTop
value greater then the max allowed value, the table will scroll to the max and onScrollEnd
will return the right scroll value, allowing me to revise my saved state with the correct max value, with no need to pre-calculate the max allowed value myself.
The same thing doesn't happen with scrollLeft
, so my state variable will continue to grow over the max allowed value with no chance to revise it when it exceeds the max value.
I have been using fixed-data-table successfully but lately after fixing lots of linting errors, I started getting this error: Uncaught (in promise) TypeError: Cannot read property '__TableColumnGroup__' of undefined
. I'm not sure what is going on as the code in my component seems to be fine. The error is thrown in the library code which makes me think that the error is in my code somewhere else.
Here is the code that is related to fixed data table:
import React, { PropTypes } from 'react';
import { Table, Column, Cell } from 'fixed-data-table-2';
import { TextCell } from './CellComponents.jsx';
import { createDynamicComponentForCells } from './UtilityFunctions.jsx';
class TableComp extends React.Component {
render() {
return (
<Table
height={this.props.heightFactor}
width={this.props.widthFactor}
rowsCount={this.props.data.length}
rowHeight={this.props.rowHeight}
headerHeight={this.props.headerHeight}
style={null}
>
{ Object.keys(this.props.data
.reduce((val1, val2) => Object
.assign({}, val1, val2), {}) || {})
.map((field, index) => {
let CellComponent;
let widthCell;
if (this.props.mapDataToCellComponentName === undefined) {
CellComponent = <TextCell style={null} data={this.props.data} col={field} />;
} else {
const [component, decimalPlaces, width] = this.props
.mapDataToCellComponentName(field, index);
widthCell = width;
/*CellComponent = createDynamicComponentForCells(component,
{ style: null,
data: this.props.data,
col: field,
decimals: decimalPlaces
}
);*/
}
return (<Column
style={null}
key={field}
cell={<Cell>ji</Cell>}
header={
<Cell
width={widthCell !== undefined ? widthCell :
this.props.columnWidth}
>{field}</Cell>
}
width={widthCell !== undefined ? widthCell : this.props.columnWidth}
/>
);
})
};
</Table>
);
}
}
TableComp.propTypes = {
data: PropTypes.array.isRequired,
mapDataToCellComponentName: PropTypes.func,
heightFactor: PropTypes.number.isRequired,
widthFactor: PropTypes.number.isRequired,
rowHeight: PropTypes.number.isRequired,
headerHeight: PropTypes.number.isRequired,
columnWidth: PropTypes.number.isRequired
};
export default TableComp;
As you can see, I'm trying to render the simplest cells inside Column since I want to see if it's working or not. It used to have custom cells.
Here is the error stack trace:
When I drag a column to the left,the column should move and when I arrived to the table end the scroll should move until the end of the columns
The scroll bar move but after 5-6 seconds the column that i was dragging disappear and the scroll bar moves on its own.
1.Create a table with 20 + columns
2.Try to drag the first column until the end of the table
3.After 5 - 6 second of dragging an warning apear
'warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the FixedDataTableColumnReorderHandle component. '
This is the function where the warning appear:
_updateState: function() {
this._animating && requestAnimationFrame(this._updateState), this.setState({
dragDistance: this._distance
}), this.props.onColumnReorderMove(this._distance);
}
I am trying to reorder column in my table,i have more than 30 column on the table
version :"fixed-data-table-2": "0.7.1",
Same as #398
I'd like to make an editable spreadsheet with the input in each cell. Everything works fine and fast the only issue is that when I focus any input every other n-th row input is focused as well (n depends on the height of the table).
We should use open source projects for default styling. Potentially looking at CSS in JS approaches. This will make it easier for folks to jump into the project and help improve the default styling or create default styling themes as suggested in #60
We currently use internal Facebook utilities for applying styles. This approach is not well understood or documented, and can lead to issues when applying custom styling to the grid.
Consider using Aphrodite or another alternative to replace the Facebook utilities
Just curious how you are planning to do releases. Are you going to pick up a new package name, take over the existing? And when do you anticipate a first release to be ready? Thanks much!
The scroll bar disappears and the user can't see all the data from the table.
All rows should be visible.
Only a part of the rows are visible.
It can be reproduced on Example Filter
I think this is a general issue for all use cases that have table resize.
Change the way fixed data table handles its internal state to allow correct dynamic row height calculation## Current Behavior
Original issue here: facebookarchive/fixed-data-table#56
Do we plan on only supporting IE11 going forward? I think its important to hear what the community has to say about this
What is the most efficient way to calculate dynamic row heights based on cell contents?
Right now FixedDataTableCellDefault provides a hard-coded padding of 8px
. You can workaround this by setting a margin of -8px
(or some equivalent) but it would be nicer if this were configurable.
Probably just pass down via props to <Cell>
(though I assume this would affect cell height calculation)
We're trying to provide a very dense table of data and the extra space that 8px
gives you is annoying to workaround.
Initially Table is rendering successfully and scrolling works fine. But on filtering or column sorting, I am getting this error
Uncaught Error: Invariant Violation: Index out of range 0
After getting this error, Scrolling also stops working and throws the same error.
I am on the latest version of react and fixed-data-table and using es6 classes.
"fixed-data-table-2": "^0.7.2", "react": "^15.3.0", "react-dom": "^15.3.0"
Hi,
I've tried using the original table and found that flex columns can shrink to nothing and seem to ignore the minWidth setting. Is this also true in your version (or am I just doing something wrong).
Thanks,
David
FDT2 has grown modestly over the last couple months. I think it's time to rename the repository to differentiate from the original repo.
The driving forces behind this are as follows:
We have some big plans in the future to make the code much easier to work with and more contributor friendly.
Please feel free to suggest names and thumbs up the ones you like!
We currently have v0.6 API Migration docs which is largely unused. We should instead refactor this to be a migration guide coming from facebooks fixed-data-table v0.6.3.
Currently we don't have any breaking features but we should list new APIs, new features and maybe resolved bugs from the origin repo.
Setting align to right on the column only align right the table header, not the cell content
If new content is added to the table and I drag the vertical scroller down, then I should be able to view all the content.
After new content is added in the table, the scroller appears but when you drag it down, you cannot see some of the new content. Whereas if you scroll inside the table (without dragging the in-built scroller), then you can see all the content.
https://jsfiddle.net/amit1911/34k8uf8o/
I have a table with pagination and change records per page feature. When users switch from let's say 10 records/page to 100 records/page then they should be able to scroll and view all the new rows. So right now when users drag the in-built scroller down to view new records, they are not able to scroll down to the last record. A couple of records become inaccessible. But if you just scroll down inside the table (without dragging down the in-built scroller), then you can view all the records.
Table is scrolling to the left
Chrome goes back in history
Probably fixed-data-table "unfolds" too slow when scrolling to the left, so chrome triggers "history back" gestory. I found no way to prevent this geature programmatically without destroying table's behavior. There are some plugins for this, but none of them actually works.
When loading a large number of rows to the fixed-data-table-2 component, rows at the bottom of the table may not be rendered currently. Sometimes it can even crash the browser. This is caused by the height limit of a HTML Dom element in the browser. Different browsers may have different limit. In the implementation of the fixed-data-table-2, it uses a sliding canvas container to expose rows that are visible depending on the window size and the scrolling position. The height of the canvas is the combined height of all rows, visible and hidden. If the combined height exceeds the allowed height of any element in the Dom structure, rows at the bottom with a top offset larger than the limited value, won't be displayed correctly.
Any number of rows can be rendered correctly with no feature broken.
When loading a large number rows, the rows at the bottom can't be rendered correctly. It may crash the browser if using FF.
Instead of using a sliding canvas and setting the height of the canvas to be literally the combined height of all rows, we can simply slide the visible rows up or down to by a calculated offset to bring them to the right position that they can be seen. The offset will always be less than combined the height of visible rows, which will never exceed the limit of any browsers.
By using a buffered design, we could load a large number of data to the component. But this issue prevents us from doing so. Because it won't allow rows at the bottom of the table to be rendered correctly.
Thanks for sharing your folk.
We're also building the re-ordering of columns then we saw yours.
Just curious, have you implemented the "scroll-on-drag" when you are re-ordering more columns that will fit the current page? We having issues on how to simulate horizontal scroll externally. If you have any ideas, please do share!
Thanks again
We use cssmodules so we have no global CSS and so we'd like to be able to use fixed-data-table-2 but we have no place to load global CSS.
Could you use CSS modules or inline styles for this component so they are isolated?
I want to make my table scroll to top when some event happens. For example when user sorts the table data, i want the user to be moved to the top of the table. For this I am using the scrollToRow
property. So I have a scrollToRow
property in my state that I set to 0
when the user sorts the data and then the cursor moves to the top of the table.
Problem
Now when I scroll inside my table and then some other action happens, the state changes and the table is re-rendered and it scrolls to the top because the scrollToRow
property in my state is still 0
. What is the best way to tackle this issue?
Just reported an issue on the "original" repo before I saw that this fork might be the one to work with.
This is the existing issue 419
Is there any way to achieve a layout like a this?
+-------------------------------------------------------------------+
| Names | | | |
+------------------------+ Birthday | City | Mail |
| First name | Last name | | | |
+------------+-----------+------------------------------------------+
| Roy | Stokes | 1989-01-01 | New York | [email protected] |
| Kelly | Rose | 1988-02-02 | London | [email protected] |
+-------------------------------------------------------------------+
I don't want it to look like this:
+-------------------------------------------------------------------+
| Names | |
+------------------------+------------------------------------------+
| First name | Last name | Birthday | City | Mail |
+------------+-----------+------------------------------------------+
| Roy | Stokes | 1989-01-01 | New York | [email protected] |
| Kelly | Rose | 1988-02-02 | London | [email protected] |
+-------------------------------------------------------------------+
My table has dynamic row heights. When I change the height of a cell and re-render the table, the scrolling on the table is broken. If I expand the same row again, scrolling is restored.
I would expect that after re-rendering the table that the scrolling would work.
The row expands but the scrollbar is removed which prevents scrolling.
It appears that _calculateState() is not getting the actual row heights from the rowHeightGetter methods when it calls
var scrollContentHeight = this._scrollHelper.getContentHeight()
At this point it is getting the height of the rows by checking the rowHeight property on the table. I see in _calculateState() there are other calls that eventually call this._scrollHelper._updateHeightsInViewport() to properly get height.
https://jsfiddle.net/3cooper/9dayaac8/
This prevents me from using this table in a solution that we have designed around it.
The new 0.6.6 versions solves the issue of resizing columns on IE11, however, there is still an old bug regarding srcolling in IE11: facebookarchive/fixed-data-table#15
Thanks a lot for maintaining this project.
I don't see any rows when click to expand collapsed row. Just height increased.
Can someone provide an example of it?
I'm rendering a checkbox on each row that is used to mark the elements that have to be removed from the table when clicking a button. When removing the top row I would expect the checkbox on the row below (now the one on top) not to be checked.
But as it stands right now, when removing the top row (whose checkbox was checked), the checkbox on the the row below (now on top) remains checked.
I imagine that the reason for the bug is that React somehow thinks that the "new" top row is the same as the previous one.
Will provide a link to a fiddle as son as possible.
The context and what I'm trying to accomplish is pretty clear.
Currently, we can't find any way to style vertical lines between column groups. We know that we can do it when you're using fixed column groups, but we simply want a vertical line through the entire table for each column groups (when none are fixed).
We'd like to be able to have a public style where we can add a nice border/vertical line through the edge of each column group to give a user clear grouping of columns. We don't want a vertical line for every single column - just the grouped ones.
Currently, the only way is to use fixed column groups, which means you can only have "effectively" two column groups with the vertical line through them. We've looked at the CSS and there are no "overarching" cell group elements, nor are there any special CSS classes on the start/end columns in a group.
The easiest solution would be to add a public CSS class to the start of every column group (e.g. public_fixedDataTableCell_cellFirstInGroup or something).
Ideally, the user should see nice column groups in the table spanning the entire height. This helps our users analyse different parts of the table clearly.
If you scroll right on the table you should be able to scroll left after any other action.
It varies but usually it doesn't work. I can consistently get it to scroll if I scroll up or down first and then try left.
Update to Chrome v52.
Open Any Example.
Reduce window size or increase some column widths.
Scroll right.
Switch tabs to something else and then come back.
Attempt to scroll the table left.
???
Scrolling left is very important.
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.