Skip to content

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

Description

@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!

Activity

  1. c0ncentus commented on Oct 25, 2021

    @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.

  2. rifkyniyas commented on Oct 25, 2021

    @rifkyniyas
    Author

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

  3. Repository owner locked and limited conversation to collaborators on Dec 17, 2021
  4. converted this issue into a discussion #188 on Dec 17, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is requested

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions