Я пытаюсь SlickGrid Checkbox Выбор строки в React с использованием пакета slickgrid-es6 . Вот пример исходного кода этого в Jquery.
Я изменил тот же код в React Es6. Но я не могу увидеть флажок здесь.
JS код:
import {Grid, Data, Plugins} from 'slickgrid-es6';
import './styles.scss';
import data from "../example-data";
let columns = [];
let CheckboxSelectColumn = Plugins.CheckboxSelectColumn;
let RowSelectionModel = Plugins.RowSelectionModel;
var checkboxSelector = new CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
columns.push(checkboxSelector.getColumnDefinition());
const newcolumns = [
{ id: "title", name: "Title", field: "title", maxWidth: 100, minWidth: 80 },
{ id: "duration", name: "Duration", field: "duration", resizable: false },
{ id: "%", name: "% Complete", field: "percentComplete" },
{ id: "start", name: "Start", field: "start" },
{ id: "finish", name: "Finish", field: "finish" },
{ id: "effort-driven", name: "Effort Driven", field: "effortDriven" }
];
columns = [columns, ...newcolumns];
console.log(columns);
const options = {
enableCellNavigation: true,
enableColumnReorder: true,
forceFitColumns: true,
frozenColumn: 0,
frozenRow: 1
};
const dataView = new Data.DataView();
dataView.setItems([ ...data ]); // some data
export default () => {
let grid = new Grid("#myGrid", dataView, columns, options);
grid.setSelectionModel(
new RowSelectionModel({ selectActiveRow: false })
);
grid.registerPlugin(checkboxSelector);
return grid;
};
стили. css,
@import '../scss/slick.grid.variables.scss';
@import '../scss/slick.grid.scss';
@import '../scss/slick-default-theme.scss';
@import '~flatpickr/dist/flatpickr.min.css';
.slick-cell-checkboxsel {
background: #f0f0f0;
border-right-color: silver;
border-right-style: solid;
}
Любые идеи?