All Projects β†’ patricktran β†’ react-table-hoc-draggable-columns

patricktran / react-table-hoc-draggable-columns

Licence: MIT license
ReactTable HOC for draggable columns

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
HTML
75241 projects

Projects that are alternatives of or similar to react-table-hoc-draggable-columns

React Bps
πŸ”± Create breakpoints to your component props
Stars: ✭ 64 (+137.04%)
Mutual labels:  higher-order-component, hoc
rrx
βš›οΈ Minimal React router using higher order components
Stars: ✭ 69 (+155.56%)
Mutual labels:  higher-order-component, hoc
Incompose
A inferno utility belt for function components and higher-order components
Stars: ✭ 76 (+181.48%)
Mutual labels:  higher-order-component, hoc
react-drip-form
β˜• HoC based React forms state manager, Support for validation and normalization.
Stars: ✭ 66 (+144.44%)
Mutual labels:  higher-order-component, hoc
React Nprogress
βŒ›οΈ A React primitive for building slim progress bars.
Stars: ✭ 173 (+540.74%)
Mutual labels:  higher-order-component, hoc
Recompact
βš› A set of React higher-order components utilities. Drop-in replacement for recompose.
Stars: ✭ 419 (+1451.85%)
Mutual labels:  higher-order-component, hoc
react-app-loader
Production ready library for handling Microfrontends
Stars: ✭ 75 (+177.78%)
Mutual labels:  higher-order-component, hoc
addhoc
Handy little helper to create proper React HOC functions complete with hoisted statics and forwarded refs
Stars: ✭ 40 (+48.15%)
Mutual labels:  higher-order-component, hoc
Neoform
βœ… React form state management and validation
Stars: ✭ 162 (+500%)
Mutual labels:  higher-order-component, hoc
Hocs
🍱 Higher-Order Components for React
Stars: ✭ 1,784 (+6507.41%)
Mutual labels:  higher-order-component, hoc
react-animation-frame
A React higher-order component that invokes a callback in a wrapped component via requestAnimationFrame
Stars: ✭ 47 (+74.07%)
Mutual labels:  higher-order-component, hoc
Kanban React
The Kanban Application with multiple backend languages.
Stars: ✭ 15 (-44.44%)
Mutual labels:  drag-and-drop, hoc
Flagged
Feature Flags for React made easy with hooks, HOC and Render Props
Stars: ✭ 97 (+259.26%)
Mutual labels:  higher-order-component, hoc
Next Nprogress
Next.js HOC to integrate NProgress inside your app
Stars: ✭ 145 (+437.04%)
Mutual labels:  higher-order-component, hoc
React With Direction
Components to provide and consume RTL or LTR direction in React
Stars: ✭ 176 (+551.85%)
Mutual labels:  higher-order-component, hoc
React Sortable Hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Stars: ✭ 9,747 (+36000%)
Mutual labels:  drag-and-drop, higher-order-component
loopple
Drag & drop dashboard builder
Stars: ✭ 180 (+566.67%)
Mutual labels:  drag-and-drop
smaller-sites
Smaller Sites is a small BUT Powerful, free and easy to use drag and drop builder for blogs, websites or e-commerce stores. Designed for everyone Developers and non Developers. You can use it to design your next website. The goal is to create something like webflow
Stars: ✭ 27 (+0%)
Mutual labels:  drag-and-drop
react-native-dnd-board
A drag and drop Kanban board for React Native.
Stars: ✭ 41 (+51.85%)
Mutual labels:  drag-and-drop
FlutterBoardView
BoardView written for the flutter framework.
Stars: ✭ 82 (+203.7%)
Mutual labels:  drag-and-drop

react-table-hoc-draggable-columns

ReactTable HOC for draggable columns

NPM JavaScript Style Guide

Higher Order Component for ReactTable to enable Draggable columns for reordering or swapping positions.

*Note: This version supports V6 of React Table.

Documentation

Install

npm install --save react-table-hoc-draggable-columns

Usage

import ReactTable from 'react-table';
import "react-table/react-table.css";
import withDraggableColumns from 'react-table-hoc-draggable-columns';
import 'react-table-hoc-draggable-columns/dist/styles.css';

const ReactTableDraggableColumns = withDraggableColumns(ReactTable);
...
render () {
  return (
    <ReactTableDraggableColumns
      draggableColumns= {{
        mode: 'reorder',
        draggable: ['firstName', 'age']
      }}
      data={data}
      columns={[
        {
          Header: 'First Name',
          accessor: 'firstName',
        },
        {
          Header: 'Last Name',
          accessor: 'lastName',
        },
        ...
        {
          Header: 'age',
          accessor: 'age',
        }
      ]}
    />
  )
}

Special Considerations

If any of your React Table columns are hidden (show: false), this HOC will automatically move those columns to the end of the list. This is to prevent hidden columns from throwing off calculating the updated column order.

ReactTable Columns Props [https://github.com/tannerlinsley/react-table/tree/v6.10.0#columns]

draggableColumns Prop

Property Description Default value Type Required
mode mode to either 'reorder' the column or 'swap' column position on drop 'reorder' string yes
draggable array of string-based column accessors or column ids (when using a custom accessor) to allow drag and drop array of strings
enableColumnWideDrag when {true} entire column is draggable. when {false} only header text is draggable true bool
disableTableScroll disable ReactTable horizontal/vertical scrolling when dragging a column false bool
overflow used with disableTableScroll={true} to reset ReactTable overflow style onDragEnd event auto string
useDragImage clone dragged column element? useful for applying a different css class. true bool
dragImageClassName dragImageClassName only applies when useDragImage={true} rt-dragged-item string
onDragEnterClassName when mode={'swap'} - css class applied on dragged over column rt-drag-enter-item string
onDraggedColumnChange callback method to be notified when column order changes - signature: function(columns) function
onDropSuccess callback method to be notified when on column drop success - signature: function(draggedColumn, targetColumn, oldIndex, newIndex, oldOffset, newOffset) function
reorderIndicatorUpClassName additional className for reorder indicator Up string
reorderIndicatorDownClassName additional className for reorder indicator Down string

License

MIT Β© patricktran

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].