score:4
you need to provider the container to the sortable component to which it must restrict the sortableelement
when using 3rd party libraries for rendering using the getcontainer
prop.
as per the react-sortable-hoc documentation:
getcontainer
is an optional function to return the scrollable container element. this property defaults to thesortablecontainer
element itself or (ifusewindowasscrollcontainer
is true) the window. use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as flextable). this function is passed a single parameter (the wrappedinstance react element) and it is expected to return a dom element.
now since you cannot pass a direct ref to the child, you can write a small wrapper over the table component before passing it to the hoc
const mytable = ({ tableref, ...rest }) => {
return <table ref={this.props.tableref} {...rest} />;
}
const sortabletable = sortablecontainer(mytable);
const sortabletablerowrenderer = sortableelement(defaulttablerowrenderer);
/**
* define the table schema
*/
const schema = [
{ datakey: "col1", label: "column 1" },
{ datakey: "col2", label: "column 2" }
];
/**
* generate row data according to the schema above
* @param {*} rowcount
*/
function generaterows(rowcount) {
const rows = [];
for (let i = 0; i < rowcount; i++) {
rows.push({ col1: i, col2: i * i });
}
return rows;
}
class mysortabletable extends component {
state = {
schema,
rows: generaterows(200)
};
onsortend = ({ oldindex, newindex }) => {
this.setstate(({ rows }) => ({
rows: arraymove(rows, oldindex, newindex)
}));
};
rowrenderer = props => {
return <sortabletablerowrenderer {...props} />;
};
getrow = ({ index }) => {
const { rows } = this.state;
return rows[index];
};
render() {
const { rows, schema } = this.state;
return (
<sortabletable
width={500}
height={500}
headerheight={32}
rowheight={32}
tableref={ref => (this.tableref = ref)}
getcontainer={() => reactdom.finddomnode(this.tableref.grid)}
rowcount={rows.length}
rowgetter={this.getrow}
onsortend={this.onsortend}
rowrenderer={this.rowrenderer}
>
{schema.map(col => (
<column {...col} key={col.datakey} width={100} />
))}
</sortabletable>
);
}
}
Source: stackoverflow.com
Related Query
- How to handle props injected by HOC in React with Typescript?
- How to add sorting to table with react virtualized?
- How to change the selected table row background color with React
- How to create new line in react table column with lots of data
- How to resize columns with React Table Hooks with a specific table width
- how to export react table with expandable rows to csv or excel?
- How to generate React table with different colored rows?
- How to use React Router <Link > with an id from antd table column
- Sortable react material UI table with specific to date column
- How do I create a two-column table in React with vertical headers?
- JavaScript: How to map object with nested arrays to table for React
- How to do OR filter using DevExtreme React Grid Table with either FilteringState and/or LocalFiltering?
- How to create a dynamic, custom React Table Component with action and status buttons
- How can I avoid unnecessary re rendering of an HOC component, when the parameter component renders in ReactJS with react router
- React sortable hoc - onClick how to change states
- React with TypeScript: how to access HOC methods in new coponent
- How to customize React Antd table header with table data?
- How to replace an HOC that strips props and assigns classnames with react hooks?
- How can you pass props and use HOC with React context
- How to add a row to the beginning of a table with react
- How to test hoc stateful component with React Hooks?
- How to Uncheck all checkboxes with a button. Input tag in child and button in parent. react - table
- How to fill in a table in react with an array of objects?
- how to react-js-pagination implement with react hook data table
- How do I make a React table sortable by every column?
- How to get full control styling for data table from DevExtreme React Grid with material-ui?
- How to create a HOC component in react validated with typescript
- How to call loading function with React useEffect only once
- How to use refs in React with Typescript
- How to use callback with useState hook in react
More Query from same tag
- Problems reordering child components from parent's state
- mistakes in filter in React state
- api call with every key stroke
- React - How can I fire an Event listener just once?
- ClientError: input:9: Field CommentCreateInput.n of required type String! w input:10: Field "name" is not defined by type CommentCreateInput
- Why my checkbox does not come out? I use react, typescript and next.Js
- React Testing Library TypeError: Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 1 present
- How do I ship a react component via script tag
- is it safe to use react js state to store token of authenticated user?
- Error: Request failed with status code 405 , payload return HTML not JSON like intended
- Parse images inside a JSON in HTTP request
- div will not change size with CSS properties
- getDisplayMedia() not working correctly on Android device
- onClick not working in React functional component
- Inputting an ARRAY into a FORM field in REACT
- Image is displaying on browser but not in reactJS <img>
- React propType specify allowed props value
- Best way of closing custom React dropdown?
- How to customize toolbar in primereact?
- Formik and FieldArray Mapping with Typescript
- How can I add a button to each list view item with Reactjs?
- React - Are all state properties required to be returned by getDerivedStateFromProps?
- Refactoring a Form into a separate component causes it to stop working correctly?
- React, writing handleInputChange function more elegant
- react-bootstrap-multiselect is not working poroperly
- API results are not consistent
- Testing React portals with enzyme
- What is the equivalent of useRouteMatch for class-based components?
- Display Axios reponse - TypeError: this.state.cryptos.map is not a function
- Is Component inside render function called child component