import React , { useState } from 'react' ; import { ITableProps , kaReducer , Table } from '../../lib' ; import { DataType , EditingMode , SortingMode } from '../../lib/enums' ; import { Column } from '../../lib/models' ; import { DispatchFunc } from '../../lib/types' ; const columns = Array ( 20 ) . fill ( undefined ) . map ( ( _ , index ) => ( { key : 'column' + index , width : 150 , title : 'Column ' + index , type : DataType . String , } ) ) ; const dataArray = Array ( 30 ) . fill ( undefined ) . map ( ( _ , index ) => columns . reduce ( ( previousValue , currentValue ) => { previousValue [ currentValue . key ] = `${ currentValue . key } row:${ index }` ; return previousValue ; } , { id : index } ) ) ; const tablePropsInit = { columns , data : dataArray , editingMode : EditingMode . Cell , rowKeyField : 'id' , sortingMode : SortingMode . Single , } ; const FixedColumnDemo = ( ) => { const [ tableProps , changeTableProps ] = useState ( tablePropsInit ) ; const dispatch = ( action ) => { changeTableProps ( ( prevState ) => kaReducer ( prevState , action ) ) ; } ; return ( < div className = 'fixed-column-demo' > < Table { ... tableProps } dispatch = { dispatch } childComponents = { { headCell : { elementAttributes : ( props ) => { if ( props . column . key === 'column0' ) { return { style : { ... props . column . style , position : 'sticky' , left : 0 , zIndex : 10 , } } ; } } } , cell : { elementAttributes : ( props ) => { if ( props . column . key === 'column0' ) { return { style : { ... props . column . style , position : 'sticky' , left : 0 , backgroundColor : '#eee' , } } ; } } } } } /> < /div>); } ; export default FixedColumnDemo ;