Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

No dnd backend provided #1677

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

No dnd backend provided #1677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c7ba3a
Correct behavior when no dnd backend provided
Mar 7, 2021
735d0ec
add working example
Mar 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions examples/examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import CustomComponents from './custom-components';
import InfiniteScrolling from './infinite-scrolling';
import Themes from './themes';
import LargeDataSet from './large-data-set';
import NoDND from './no-drag-and-drop';

/**
* Here you can add any extra examples with the Card label as the key, and the component to render as the value
Expand Down Expand Up @@ -65,6 +66,7 @@ export default {
'Hide Columns Print': HideColumnsPrint,
'Infinite Scrolling': InfiniteScrolling,
'Large Data Set': LargeDataSet,
'No Drag and Drop': NoDND,
'OnDownload': OnDownload,
'OnTableInit': OnTableInit,
'Resizable Columns': ResizableColumns,
Expand Down
129 changes: 129 additions & 0 deletions examples/no-drag-and-drop/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import React, { useState } from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "../../src";
import Chip from '@material-ui/core/Chip';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

function Example() {
// const allTags = ['leave-message', 'frequently-busy', 'nice', 'grumpy', 'in-person', 'preferred', 'second-choice'];
const [filterArrayFullMatch, setFilterArrayFullMatch] = useState(true);

const columns = [
{
name: "Name",
options: {
filter: true,
display: 'excluded',
}
},
{
label: "Modified Title Label",
name: "Title",
options: {
filter: true,
}
},
{
name: "Location",
options: {
print: false,
filter: false,
}
},
{
name: "Age",
options: {
filter: true,
print: false,
}
},
{
name: "Salary",
options: {
filter: true,
sort: false
}
},
{
name: 'Tags',
options: {
filter: true,
filterType: 'multiselect',
customBodyRenderLite: (dataIndex) => {
let value = data[dataIndex][5];
return value.map((val, key) => {
return <Chip label={val} key={key} />;
});
},
}
},
];


const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000", ['nice', 'preferred']],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000", ['grumpy', 'second-choice']],
["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000", ['frequently-busy', 'leave-message']],
["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000", ['in-person', 'nice']],
["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000", ['preferred']],
["Blake Duncan", "Business Management Analyst", "San Diego", 65, "$94,000", ['nice']],
["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000", ['nice', 'preferred']],
["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000", ['frequently-busy', 'leave-message']],
["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000", ['frequently-busy', 'leave-message', 'nice']],
["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000", ['grumpy', 'second-choice']],
["Harper White", "Attorney", "Pittsburgh", 52, "$420,000", ['preferred']],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000", ['preferred']],
["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000", ['preferred']],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000", ['preferred']],
["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000", ['preferred']],
["Addison Navarro", "Business Management Analyst", "New York", 50, "$295,000", ['preferred']],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000", ['preferred']],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000", ['preferred']],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000", ['preferred']],
["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000", ['preferred']],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000", ['preferred']],
["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000", ['preferred']],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000", ['preferred']],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000", ['preferred']],
["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000", ['preferred']],
["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000", ['preferred']],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000", ['preferred']],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000", ['preferred']],
["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, "$45,000", ['preferred']],
["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000", ['preferred']]
];

const options = {
filter: true,
filterArrayFullMatch: filterArrayFullMatch,
filterType: 'dropdown',
responsive: 'standard',
};

return (
<>
<FormControlLabel
control={
<Switch
checked={filterArrayFullMatch}
onChange={e => setFilterArrayFullMatch(e.target.checked)}
value="filterArray"
color="primary"
/>
}
label="Fullmatch for Array filter"
/>
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
components={{DragDropBackend: null}}
/>
</>
);

}

export default Example;
88 changes: 59 additions & 29 deletions src/components/TableHead.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { TableHead as MuiTableHead } from '@material-ui/core';
import clsx from 'clsx';
import React, { useState } from 'react';
import TableHeadCell from './TableHeadCell';
import TableHeadCellNoDnD from './TableHeadCellNoDnD';
import TableHeadRow from './TableHeadRow';
import TableSelectCell from './TableSelectCell';

Expand Down Expand Up @@ -49,6 +50,10 @@ const TableHead = ({
}) => {
const classes = useStyles();

const isDraggingEnabled = () => {
return options.draggableColumns && options.draggableColumns.enabled;
};

if (columnOrder === null) {
columnOrder = columns ? columns.map((item, idx) => idx) : [];
}
Expand Down Expand Up @@ -134,35 +139,60 @@ const TableHead = ({
(column.customHeadRender ? (
column.customHeadRender({ index, ...column }, handleToggleColumn, sortOrder)
) : (
<TableHeadCell
cellHeaderProps={
columns[index].setCellHeaderProps ? columns[index].setCellHeaderProps({ index, ...column }) || {} : {}
}
key={index}
index={index}
colPosition={colPos}
type={'cell'}
setCellRef={setCellRef}
sort={column.sort}
sortDirection={column.name === sortOrder.name ? sortOrder.direction : 'none'}
toggleSort={handleToggleColumn}
hint={column.hint}
print={column.print}
options={options}
column={column}
columns={columns}
updateColumnOrder={updateColumnOrder}
columnOrder={columnOrder}
timers={timers}
draggingHook={[dragging, setDragging]}
draggableHeadCellRefs={draggableHeadCellRefs}
tableRef={tableRef}
tableId={tableId}
components={components}>
{column.customHeadLabelRender
? column.customHeadLabelRender({ index, colPos, ...column })
: column.label}
</TableHeadCell>
(isDraggingEnabled()) ? (
<TableHeadCell
cellHeaderProps={
columns[index].setCellHeaderProps ? columns[index].setCellHeaderProps({ index, ...column }) || {} : {}
}
key={index}
index={index}
colPosition={colPos}
type={'cell'}
setCellRef={setCellRef}
sort={column.sort}
sortDirection={column.name === sortOrder.name ? sortOrder.direction : 'none'}
toggleSort={handleToggleColumn}
hint={column.hint}
print={column.print}
options={options}
column={column}
columns={columns}
updateColumnOrder={updateColumnOrder}
columnOrder={columnOrder}
timers={timers}
draggingHook={[dragging, setDragging]}
draggableHeadCellRefs={draggableHeadCellRefs}
tableRef={tableRef}
tableId={tableId}
components={components}>
{column.customHeadLabelRender
? column.customHeadLabelRender({ index, colPos, ...column })
: column.label}
</TableHeadCell>
) : (
<TableHeadCellNoDnD
cellHeaderProps={
columns[index].setCellHeaderProps ? columns[index].setCellHeaderProps({ index, ...column }) || {} : {}
}
key={index}
index={index}
colPosition={colPos}
type={'cell'}
setCellRef={setCellRef}
sort={column.sort}
sortDirection={column.name === sortOrder.name ? sortOrder.direction : 'none'}
toggleSort={handleToggleColumn}
hint={column.hint}
print={column.print}
options={options}
column={column}
tableId={tableId}
components={components}>
{column.customHeadLabelRender
? column.customHeadLabelRender({ index, colPos, ...column })
: column.label}
</TableHeadCellNoDnD>
)
)),
)}
</TableHeadRow>
Expand Down
2 changes: 1 addition & 1 deletion src/components/TableHeadCell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ const TableHeadCell = ({

const isDraggingEnabled = () => {
if (!draggingHook) return false;
return options.draggableColumns && options.draggableColumns.enabled && column.draggable !== false;
return column.draggable !== false;
};

const sortLabelProps = {
Expand Down