os-js / osjs-gui

open simple example how create listview with os.js

https://codepen.io/andersevenrud/pen/vvGXOO

paste code below to JS window.

const {h, app} = hyperapp;
const {Box, Tabs, listView} = osjsGui;

const $content = document.querySelector('#app');
const view = (state, actions) => {
  // Creates a new component based on the state and actions created
  const MyListView = listView.component(state.mylistview, actions.mylistview);

  return h(Box, {grow: 1, shrink: 1}, [
    h(Tabs, {
      labels: ['1','3','444']
    }, [
      h(MyListView, {box: {grow: 1, shrink: 1}})
    ])
  ])
};
    
const initialRows = [{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},{
  columns: [1, 2, 3],
  data: {foo: 'bar'}
},];

app({
  mylistview: listView.state({
    // Set up the initial state
    columns: ['A', 'B', 'C'],
    rows: initialRows
 }),
}, {
  // Register callback actions
  mylistview: listView.actions({
    select: ({data, index, ev}) => console.log('Selected', data, index, ev),
    activate: ({data, index, ev}) => console.log('Activated', data, index, ev),
    contextmenu: ({data, index, ev}) => console.log('Menu', data, index, ev)
 })
}, view, $content);

Listview scrollbar is not shown

it can be fixed like this
\src\client\index.scss

.osjs-gui-tabs-panes {
	overflow: auto;
}

add this into the release please of listview component

osjs-gui/src/styles/_tabs.scss

Line 55 in 5cda8f7

.osjs-gui-tabs-panes {

(i guess this is wrong repository bug was posted, sorry)

Thanks! I have a fix for this coming: #29

The fix has now been deployed. Thanks again!

I do however note that jsdelivr takes a while to update because without explicitly using https://cdn.jsdelivr.net/npm/@osjs/gui@4.0.33/dist/main.css as the CSS file in codepen it still loads the previous version. But this might might be resolves by the time you see this messaage. Edit I purged manually and it looks OK now :)

Tabs + ListView - scrollbar bug