6pac / SlickGrid

A lightning fast JavaScript grid/spreadsheet
https://stackblitz.com/github/6pac/SlickGrid/tree/master/vite-demo
MIT License
1.84k stars 423 forks source link

Slick.Resizable is undefined (CDN-5.9.1) #1059

Closed starzar closed 1 month ago

starzar commented 1 month ago

Describe the bug

Afer import:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/styles/css/slick-alpine-theme.min.css">
    <script src="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/browser/slick.core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/browser/slick.grid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/browser/slick.interactions.min.js"></script>

Error:

Slick.Resizable is undefined, make sure to import "slick.interactions.js"
    at Grid.setupColumnResize (slick.grid.ts:1902:13)
    at Grid.createColumnHeaders (slick.grid.ts:1711:10)
    at Grid.finishInitialization (slick.grid.ts:875:12)
    at Grid.initialize (slick.grid.ts:835:12)
    at new Grid (slick.grid.ts:583:10)
    at (index):43:12

Reproduction

using Tornado server(python) to pass data to index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SlickGrid with Tornado</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/styles/css/slick-alpine-theme.min.css">
    <script src="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/browser/slick.core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/browser/slick.grid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/browser/slick.interactions.min.js"></script>
    <style>
        #myGrid {
            width: 600px;
            height: 500px;
        }
    </style>
</head>

<body>
    <h2>Data Table with SlickGrid</h2>
    <div id="myGrid"></div>
</body>

<script>
    // SlickGrid column definitions
    var columns = [
        {id: "id", name: "ID", field: "id"},
        {id: "name", name: "Name", field: "name"},
        {id: "age", name: "Age", field: "age"}
    ];

    var options = {
        enableCellNavigation: true,
        enableColumnReorder: false
    };

    // Fetch data from Tornado backend
    fetch('/data')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response Error ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            console.log('data');
            console.log(data);
            var grid = new Slick.Grid("#myGrid", data, columns, options);
        })
        .catch(error => {
            console.error('Error in  fetch operation:', error);
        });
</script>
</script>

</html>

Which Framework are you using?

Vanilla / Plain JS

Environment Info

| Executable          | Version |
| ------------------- | ------- |
| (framework used)    | VERSION |
| SlickGrid | 5.9.1|
| TypeScript          | VERSION |
| Browser(s)          | VERSION |
| System OS           | VERSION |

Validations

ghiscoding commented 1 month ago

The import order is important when you use legacy scripts, slick.core and slick.interaction should be first since they are required by the grid and then import slick.grid as the 3rd import

this should work

<script src="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/browser/slick.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/browser/slick.interactions.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slickgrid@5.9.1/dist/browser/slick.grid.min.js"></script>