Nocturnal Practitioners of Magic

    vue-virtualized-table-booway

    0.0.3 • Public • Published

    Vue Virtualized Table

    The second version of implementation of vue-virtual-table component, it was inspired from rc-table and ant-table, API design is 60%+ consistent. Or you could think I translated them from React to Vue and added virtualize scroll feature.

    Features

    1. Support customize render
    2. Support virtualized scroll
    3. Support expand/collapse
    4. Support customize depth

    Usage

    Look the Demo or run this project example in Terminal with npm:

    npm install
    npm run serve

    Code example:

    import VirtualTable from 'vue-virtualized-table'
    import 'vue-virtualized-table/src/table.css'
    
    export default {
      render() {
        return (
          <VirtualTable
            row-key="id"
            scroll={{ y: 200 }}
            columns={columns}
            data-source={dataSource}
          />
        )
      }
    }

    API

    props

    TableProps

    {
      rowClassName: {
        type: [String, Function],
        default: ''
      },
    
      // fixed when header/columns are fixed, or using column.ellipsis
      tableLayout: {
        type: String,
        validator(val) {
          return ['auto', 'fixed'].includes(val)
        }
      },
    
      direction: {
        type: String,
        default: 'ltr',
        validator(val) {
          return ['ltr', 'rtl'].includes(val)
        }
      },
    
      // Whether to show all table borders
      bordered: Boolean,
    
      // Columns of table: ColumnProps[]
      columns: {
        type: Array,
        required: true
      },
    
      // Override default table elements
      components: {
        type: Object,
        default: () => TableComponents
      },
    
      // Data record array to be displayed
      dataSource: {
        type: Array,
        default: () => [],
        required: true
      },
    
      // expandable
      expandable: Object, // See it below
      // Whether to use virtualize scroll behavior
      useVirtual: Boolean,
      // The row height number of per row in TableBody
      rowHeight: Number,
      // The row index to specify where the view scroll to
      scrollToRow: { type: Number, default: 0 },
    
      prefixCls: {
        type: String,
        default: 'ant-table'
      },
    
      // Table footer renderer
      // Should it be slot?
      title: {
        type: [Function, Object]
      },
    
      // Table footer renderer
      // Should it be slot?
      footer: {
        type: [Function, Object]
      },
    
      rowKey: {
        type: [String, Function],
        required: true
      },
    
      rowSelection: Object,
    
      // { x: number | true, y: number }
      // x:	Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and 'max-content'	number | true	-
      // y:	Set vertical scrolling, can also be used to specify the height of the scroll area, could be number	number	-
      scroll: {
        type: Object,
        default: () => ({})
      },
    
      showHeader: {
        type: Boolean,
        default: true
      },
    
      size: {
        type: String,
        default: 'default',
        validator(val) {
          return ['default', 'middle', 'small'].includes(val)
        }
      },
    
      locale: {
        type: Object,
        default: () => DEFAULT_LOCALE
      }
    }

    expandable

    {
      // The children's name
      childrenColumnName: {
        type: String,
        default: 'children' // string
      },
    
      // Indent size in pixels of tree data
      indentSize: {
        type: Number,
        default: 15 // must be Number
      },
    
      // Customize row expand Icon. Ref example
      expandIcon: Function, // (h, { prefixCls: string, expanded: boolean, expandable: boolean, record: object, onExpand: Function }) => VNode,
    
      // Customize row expand render.
      expandedRowRender: Function, // (h, { record: object, index: number, index: number, expanded: boolean }) => VNode,
    
      // Whether row can be expandable or not
      rowExpandable: Function, // (h) => boolean,
    
      // Current expanded row keys
      expandedRowKeys: {
        type: Array,
        default: () => [] // RowKey[]
      },
    
      // Current expanded deep into which depth
      expandedDepth: {
        type: Number,
        default: null // RowKey[]
      },
    
      // Expand all rows initially
      defaultExpandAllRows: {
        type: Boolean,
        default: true // boolean
      },
    }

    rowSelection

    {
      type: {
        type: String,
        default: 'radio',
        validator(val) {
          return ['radio', 'checkbox'].includes(val)
        }
      },
      // Controlled selected row keys: string[]|number[]
      selectedRowKeys: {
        type: Array,
        default: () => []
      },
      // Callback executed when selected rows change
      onChange: {
        type: Function,
        default: (selectedRowKeys, selectedRows) => {}
      },
      // Callback executed when select/deselect one row
      onSelect: {
        type: Function,
        default: (record, selected, selectedRows, nativeEvent) => {}
      }
    }

    ColumnProps

    {
      label: STRING_REQUIRED_PROP,
      prop: STRING_REQUIRED_PROP,
      key: STRING_REQUIRED_PROP,
      width: [String, Number],
    
      colspan: [Number, Function],
      rowspan: [Number, Function],
      className: [String, Function],
    
      fixed: {
        type: [Boolean, String],
        validator(val) {
          return [true, false, LEFT, RIGHT].includes(val)
        }
      },
    
      align: {
        type: String,
        validator(val) {
          return [LEFT, CENTER, RIGHT].includes(val)
        }
      },
    
      ellipsis: BOOLEAN_FALSE_PROP,
      expandable: BOOLEAN_FALSE_PROP,
    
      render: Function, // BodyRowCellRender: VNode|({ store: TableStore, row: RowModel, column: ColumnConfig }) => VNode
      renderHeader: Function, // HeaderRowCellRender: VNode|({ store, row, column }) => VNode
    
      // TODO
      resizable: BOOLEAN_FALSE_PROP
    }

    TableStore

    isRowExpanded: (rowKey: string|RowModel) => boolean, // Whether current row/rowKey is expanded or not
    toggleRowExpansion: (rowKey: string|RowModel, state: boolean => void, // To toggle current expansion state
    toggleExpandAll: (expand: boolean) => void,// To toggle all rows be expanded
    toggleExpandDepth: (depth: number) => void, // To toggle rows be expanded by specified depth number
    isRowSelected: (rowKey: string|RowModel) => boolean, // Whether current row/rowKey is selected or not
    toggleRowSelection: (rowKey: string|RowModel) => // To toggle current row selection state

    slots

    name render
    empty When no-data so show empty block
    title The title panel slot
    footer The footer panel slot

    events

    name parameters description
    select-change (record: RowModel, selected: boolean, selectedRowKeys: string[], nativeEvent: Event) => void When selection changed
    expand-change (record: RowModel, isExpanded: boolean, expandedRowKeys: string[], nativeEvent: Event) => void When trigger expand or collapse

    license

    MIT

    Install

    npm i vue-virtualized-table-booway

    DownloadsWeekly Downloads

    5

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    107 kB

    Total Files

    29

    Last publish

    Collaborators

    • liuxia