autodesk / react-base-table Goto Github PK
View Code? Open in Web Editor NEWA react table component to display large datasets with high performance and flexibility
Home Page: https://autodesk.github.io/react-base-table/
License: MIT License
A react table component to display large datasets with high performance and flexibility
Home Page: https://autodesk.github.io/react-base-table/
License: MIT License
I don't know whether this is a bug, when the total width of header is exceed the table width. if there is no data, the horizontal scrollbar will not be shown, only there are some data on table body, the horizontal scrollbar shown
I am trying to define a custom Column
component with selection functionality but the cellRenderer
and headerRenderer
props do not seem to use the custom components I've defined in the file when I import the Column to use.
Example can be found here: https://codesandbox.io/s/checkboxcolumnexample-rkpjt
I am on "react-base-table": "1.6.5"
Is it possible to set the component to autogenerate the row id and have the component generate this key on its own, like 1,2,3,4,5?
React-Texty Tooltip not working with AutoResizer
react-base-table/src/BaseTable.js
Line 370 in 1a20d85
Right now I'm always passing a width to every column, if I don't pass, I couldn't see it on table.
I think we can just have a prop called defaultColumnWidth
then we can just use it while we're calculating column width.
getColumnWidth(column, key) {
const {
isFluid,
defaultColumnWidth,
initialColumnWidths,
} = this.props;
const baseWidth = 20;
if (isFluid) {
return initialColumnWidths[column.key] || column.width || (baseWidth + (column.title.length * 10));
}
return initialColumnWidths[column.key] || column.width || defaultColumnWidth;
}
this function will gonna make a variable called calculatedColumns
after aggregating all columns. We can use it inside this functionality:
export function adjustColumnWidths(calculatedColumns, calculatedColumnsWidth, expectedWidth) {
if (expectedWidth > totalWidth) {
return distributeWidth(columns, expectedWidth - calculatedColumnsWidth);
}
return columns;
}
function distributeWidth(columns, _remainingWidth) {
const newColumns = [];
let remainingWidth = _remainingWidth;
const perColumnWidth = remainingWidth / columns.length;
columns.forEach(column => {
const newColumnWidth = Math.floor(column.width + perColumnWidth);
remainingWidth -= perColumnWidth;
newColumns.push({
...column,
width: newColumnWidth,
});
});
return newColumns;
}
This whole functionality will give us a chance to pass columns without width
key.
In my project, we've a toggle column feature and sometimes we're showing only 1 or 2 columns, it would be nice to have this fluid functionality to spread them into whole table.
Hi, basead on the example I added rowEventHandlers with console.log and it only run when the page is loaded, and nothing happened when row is clicked
const rowEventHandlers = {
onClick: console.log('clicked'),
}
...
<BaseTable ... rowEventHandlers={rowEventHandlers} />
And based on your example
const rowEventHandlers = {
onClick: action('click'),
onDoubleClick: action('double click'),
onContextMenu: action('context menu'),
onMouseEnter: action('mouse enter'),
onMouseLeave: action('mouse leave'),
}
How to get the event, because it only passed string ?
Thanks
should be done before #12
I use headerRenderer to custom the table header. And there are some frozen columns.
I want to render different element in left columns and right columns, but i can`t know which frozen type is it.
Shall you add a parameter to flag it ? like this :
headerRenderer = (cells, columns, headerIndex, frozen)=>{}
The currenty way to create multi header like this: https://autodesk.github.io/react-base-table/examples/multi-header.
I`v to say it is not simple.
The simple way maybe like this ,just use the children attribute.
I want to custom the expand icon styles , but i found it is very difficult. Because when i use the
table components to reset expandIcon component ,i have to handle the onExpand event.
I just want to set the expand icon display styles, only use css or custom component easily.
Hi, what is the best practice for changing table theme color dynamically (example for light or dark theme) since the documentation only mention using scss
Thanks
does row span is supported? I find the clospan is supported in the example.
Hey guys, I'm trying to write a wrapper for Table and Column, but I don't know what's wrong.
This is my Table component wrapper:
This is my Column component wrapper:
This is how it's being rendered:
This is how it should be rendered:
The weird part is that the console.log on Column component is not printing anything.
Am I doing anything wrong? This is the right way to do this?
Thank you,
Rod
We're starting to use react-base-table on Shotgun. One of the things we're working on is saving column sizes after resizing them. We have this functionality in our current grid, but need to port this functionality to our new grid that is using <BaseTable />
. The BaseTable
component has an onColumnResize
prop, but in our case, we really only want to save settings once the column is finished resizing. I have a PR that adds an onEndColumnResize
prop to <BaseTable />
for columns that are resizable.
Is this something you would consider adding to <BaseTable />
?
I was trying to use a react-apollo-hook in a custom cellRenderer in order to load data into a modal if the user clicks. However, I get the error message: Invalid hook call: Hooks can only be called inside of the body of a function component.
I believe it is because of the way cellRenderer is being called here.
Is there a different way to accomplish this. Or is using hooks in a cell outside of the scope of this project? Thanks for the help in advance.
For example I was trying to do something like this:
import React from 'react'
import PropTypes from 'prop-types'
import { useLazyQuery } from '@apollo/react-hooks'
import { get } from 'lodash'
import { QUERY } from './queries'
export const InterpretationsCell = ({ cellData, }) => {
const [loadDetails, { loading, data }] = useLazyQuery(QUERY)
...do something
return <p>{cellData}</p>
}
InterpretationsCell.propTypes = {
column: PropTypes.shape({
variantType: PropTypes.string.isRequired,
idKey: PropTypes.string.isRequired,
}).isRequired,
}
export default InterpretationsCell
In case when we use input box in the Inline Editing, we lose focus and component state at the first value change in text box, gif file with example and code you can find below
const { Overlay } = ReactOverlays
const CellContainer = styled.div`
display: flex;
flex: 1 0 100%;
align-items: center;
height: 100%;
width: 100%;
overflow: hidden;
margin: 0 -5px;
padding: 5px;
border: 1px dashed transparent;
`
const GlobalStyle = createGlobalStyle`
.BaseTable__row:hover,
.BaseTable__row--hover {
${CellContainer} {
border: 1px dashed #ccc;
}
}
`
const Select = styled.select`
width: 100%;
height: 30px;
margin-top: 10px;
`
class EditableCell extends React.PureComponent {
state = {
value: this.props.cellData,
editing: false,
}
setTargetRef = ref => (this.targetRef = ref)
getTargetRef = () => this.targetRef
handleClick = () => this.setState({ editing: true })
handleHide = () => this.setState({ editing: false })
handleChange = e =>
this.setState({
value: e.target.value,
editing: false,
})
render() {
const { container, rowIndex, columnIndex } = this.props
const { value, editing, cellData } = this.state
return (
<CellContainer ref={this.setTargetRef} onClick={this.handleClick}>
{!editing && value}
{editing && this.targetRef && (
<Overlay
show
flip
rootClose
container={container}
target={this.getTargetRef}
onHide={this.handleHide}
>
{({ props, placement }) => (
<div
{...props}
style={{
...props.style,
width: this.targetRef.offsetWidth,
top:
placement === 'top'
? this.targetRef.offsetHeight
: -this.targetRef.offsetHeight,
}}
>
<input type="text" value={value} onChange={this.handleChange} />
</div>
)}
</Overlay>
)}
</CellContainer>
)
}
}
const columns = generateColumns(2)
const data = generateData(columns, 10)
columns[0].cellRenderer = EditableCell
columns[0].width = 300
export default () => (
<>
<GlobalStyle />
<Table fixed columns={columns} data={data} />
</>
)
As the title mentioned, when I have a table and the columns not only contains the left frozen columns, but also the right frozen columns, because I want to merge some columns in header, like this example https://autodesk.github.io/react-base-table/examples/multi-header, so I need implement the callback headerRenderer
, but this callback will be called 3 times, and there is no indicator which is left table main table, and right table, in user's (developer who use this component) view, I think this function will be called one time only, because there is only one header.
As of version 1.7.0 scrollToRow no longer works.
The issue seems to be the scrollToLeft statement that was added last in the scrollToRow function.
This statement resets the horizontal scrolling position to what it was before the method was called.
Line 21 in 1a20d85
I have code like below
{
key: 'sectorName',
dataKey: 'sectorName',
width: 100,
title: <MyComponent {...someProps}>,
frozen: Column.FrozenDirection.LEFT,
}
this will cause a stack overflow, because in the source code
if (!isObjectEqual(nextColumns, columns) || nextProps.fixed !== this.props.fixed) {
this.columnManager.reset(nextColumns, nextProps.fixed);
}
the isObjectEqual
will throw an error, is this a bug? because I want to render a component in my header cell
This looks like an amazing project with great performance. Congratulations! I wanted to ask: Are there any plans to add spreadsheet like functionality for making all cells editable?
I expected columns to be numbered accordingly.
https://autodesk.github.io/react-base-table/examples/multi-sort
hi, we're always showing scrollbar inside our tables and right now if there's no mouse plugged to the computer, our gridtables height computation looks problematic.
If could be a change to add a prop for this? like defaultScrollbarSize? cause I don't see any other solution to make getScrollbarSize util get this size always.
Expand lag in develop env but not appear in production mode .It cost about 20 seconds when i expand a row in 10000 rows table.
I want to add an empty column with auto width to fill in blank space and separate data from columns with actions to make it nicer to the eyes. Is it possible?
Here is the wishlist I'd like to have for the next major version:
Grid
for table headerreact-virtualized
with react-window
#12Breaking changes:
rollup
to bundle packagerowRenderer
tagName
to as
or elementType
scrollToPosition
to scrollTo
headerRenderer
to headerRowRenderer
headerRenderer
for Column
to headerCellRenderer
AutoResizer
to a separate packageNice to have:
I use a table with frozen columns , it is not just-in-time when i scroll. Is it a bug from react-window ?
but there is a example doesn`t have this problem in document :
https://autodesk.github.io/react-base-table/examples/expand-icon-props
there is my demo code
https://codesandbox.io/s/dazzling-ardinghelli-xo1yh?fontsize=14
How can i solve it ?
Any chance in-place edit and filtering in headers will be added as hooks?
I would especially love to see in-place edit with support for excel like formulas.
It appears that when using maxHeight
with emptyRenderer
, it does not actually use emptyRenderer
.
I created this sandbox to replicate the issue. Not sure if I should be setting height
if data.length === 0
?
Basically, I was trying to have render only up to a certain height, but if no rows are available to then render a message such as "No Data". Thanks in advance!
I know rowID as number is not scalable but some of our data will not gonna be bigger to put as string. yep, in some cases our rowID is just number, I don't want to aggregate my data and make them string for this case, it would be nice to accept number and string for rowID propType.
react-base-table/src/GridTable.js
Line 171 in 8a5b1f5
can react-base-table support highlight a selected row?
Dragable Row example resets data order on drag end.
When hovering any row triggers headerRenderer and cellRenderer for each column.
Test:
put console.log in inside the callbacks and move mouse around.
assuming I have 100 columns data, the 100 columns will rendered at once. can we support this feature of lazy render in column level?
Some features won't be implemented in BaseTable
itself, but I will provide some examples for them.
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.