How to add pagination, add and remove data using buttons?

[rifkyniyas]

I have been submitted a task to add extra features to an already working project with react-spreadsheet. It's my first time working with this library and I referred documentation to understand how can I proceed further.

I found only a few examples in the docs and I found it difficult to refer the api documentation. I went through the issues and didn't find any issues that solved the features I am looking for.

Here are the tasks I am trying to achieve.

• Add pagination
  Because, there are about 750+ data loaded from database and there are some serious performance issues.
• Add data by appending a row below when hovering in between row cells
• Remove data using a button add the end of each row

I would be thankful for any directions to proceed forward and feel free to ask me any more details to better understand the question. Thank you!

[c0ncentus]

really basic controll data

export class Excel extends Component<any, { data: { value: string; }[][] }> {
    constructor(props: any) {
        super(props);
        this.state = {
            data: [
                [{ value: "Vanilla" }, { value: "Chocolate" }],
                [{ value: "Strawberry" }, { value: "Cookies" }]
            ]
        }
    };
    onActivate = ({ row, column }: any) => { console.log(row); console.log(column)};

    render() {
        return <Spreadsheet {...{
            data: this.state.data,
            darkMode: true,
            onActivate: this.onActivate
        }} />
    }
}

and then :
-add data dynamicly
-remoove data yourself
-make pagination yourself ...

you have really basic knowledge to make this real ... (manipulate array of data).

if you want hooks, do your own !

I recommand you to test it with TSX.

[rifkyniyas]

Thank you for pointing it out. I was wondering whether there is a built in method for achieving this task?