https://github.com/ytkj/ag-grid-axios

frontend utilities for AgGrid and Axios HTTP client, powered by TypeScript.
https://github.com/ytkj/ag-grid-axios

aggrid axios typescript

Last synced: 9 days ago
JSON representation

frontend utilities for AgGrid and Axios HTTP client, powered by TypeScript.

• Host: GitHub
• URL: https://github.com/ytkj/ag-grid-axios
• Owner: ytkj
• License: mit
• Created: 2019-06-03T12:42:11.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T06:04:25.000Z (almost 2 years ago)
• Last Synced: 2024-10-28T17:23:36.848Z (about 2 months ago)
• Topics: aggrid, axios, typescript
• Language: TypeScript
• Homepage:
• Size: 3.15 MB
• Stars: 0
• Watchers: 2
• Forks: 2
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ag-grid-axios

frontend utilities for AgGrid and Axios HTTP client, powered by TypeScript.

this is client-side counter part for [sqlalchemy_ag_grid](https://github.com/ytkj/sqlalchemy-ag-grid).

## Installation

`npm install -S @ytkj/ag-grid-axios`

## Usage

`DataSource` implements [datasource interface](https://www.ag-grid.com/javascript-grid-infinite-scrolling/#datasource-interface)

of AgGrid [**Infinite Scroll Model**](https://www.ag-grid.com/javascript-grid-infinite-scrolling).

passing `DataSource` instance to AgGrid `api.setDatasource()` setter method.

here is React example.

```typescript

import { DataSource } from '@ytkj/ag-grid-axios';

/* other import statements or something */

export class AgGridView extends React.Component {

    private gridDataSource: IDatasource;

    

    public componentDidMount(): void {

        this.gridDataSource = DataSource.factory(

            '/api/grid/start/{{startRow}}/end/{{endRow}}'

        )

    }

    

    public render(): React.ReactNode {

        return (

            


                

            

        );

    }

    

    private handleGridReady(param: GridReadyEvent): void {

        param.api.setDatasource(this.gridDataSource);

    }

}

```


Every time current cached rows scrolled out, AgGrid call the `DataSource` instance in appropreate timing.

The `DataSource` instance will build a HTTP request from start/end row index and `FilterModel`/`SortModel` and send it server.

Receiving response from server, the `DataSource#getRow` will pass response contents to AgGrid.

### React, Vue.js, Angular

ag-grid-axios does not depend on React, so can be used with not only React, but also Angular, Vue.js or Vanilla.

## API

### `DataSource.factory()`

static factory method to instanciate `DataSource`.

#### Arguments

|#|type|description|

|---|---|---|

|1|`string`|required parameter. this will be used as url template string, and `'{{startRow}}'` and `'{{endRow}}'` will be replaced to requesting row start/end index set by AgGrid|

|2|[`AxiosInstance`](https://github.com/axios/axios#creating-an-instance)|optional parameter. this will be used as HTTP client. default to pre-configured axios instance.|

## REST API

schema of HTTP request made by `DataSource` is described in [here](https://ytkj.github.io/ag-grid-axios/openapi/swagger-ui/index.html#/default/get_any_url_including__startRow__and__endRow_).