Skip to content

Commit

Permalink
implement column reorder (#866)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbetancur
jbetancur authored Aug 14, 2021
1 parent 17e7842 commit 08b60c4
Show file tree
Hide file tree
Showing 17 changed files with 1,214 additions and 609 deletions.
200 changes: 102 additions & 98 deletions README.md
View file

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-data-table-component",
"version": "7.0.0-rc2",
"version": "7.0.0-rc3",
"description": "A declarative react based data table",
"main": "dist/index.cjs.js",
"module": "dist/index.es.js",
Expand Down Expand Up @@ -52,12 +52,12 @@
"@types/jest": "^26.0.23",
"@types/lodash-es": "^4.17.4",
"@types/lodash.orderby": "^4.6.6",
"@types/node": "^15.12.2",
"@types/node": "^15.12.4",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.7",
"@types/styled-components": "^5.1.9",
"@typescript-eslint/eslint-plugin": "^4.26.1",
"@typescript-eslint/parser": "^4.26.1",
"@types/react-dom": "^17.0.8",
"@types/styled-components": "^5.1.10",
"@typescript-eslint/eslint-plugin": "^4.28.0",
"@typescript-eslint/parser": "^4.28.0",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"codecov": "^3.8.2",
Expand All @@ -71,7 +71,7 @@
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"faker": "^4.1.0",
"jest": "^27.0.4",
"jest": "^27.0.5",
"jest-styled-components": "^7.0.4",
"jest-watch-typeahead": "^0.6.4",
"lodash-es": "^4.17.21",
Expand All @@ -82,19 +82,19 @@
"react-app-polyfill": "^2.0.0",
"react-dom": "^17.0.2",
"rimraf": "^3.0.2",
"rollup": "^2.51.2",
"rollup": "^2.52.2",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.30.0",
"rollup-plugin-visualizer": "^5.4.1",
"styled-components": "^5.0.1",
"styled-components": "^5.3.0",
"stylelint": "^13.13.1",
"stylelint-config-recommended": "^4.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
"ts-jest": "^27.0.3",
"typescript": "^4.3.2"
"typescript": "^4.3.4"
},
"dependencies": {
"deepmerge": "^4.2.2",
Expand Down
93 changes: 48 additions & 45 deletions src/DataTable/DataTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,11 @@ import { CellBase } from './Cell';
import NoData from './NoDataWrapper';
import NativePagination from './Pagination';
import useDidUpdateEffect from '../hooks/useDidUpdateEffect';
import {
decorateColumns,
getColumnById,
getNumberOfPages,
getSortDirection,
setRowData,
isEmpty,
isRowSelected,
recalculatePage,
} from './util';
import { getNumberOfPages, setRowData, isEmpty, isRowSelected, recalculatePage } from './util';
import { defaultProps } from './defaultProps';
import { createStyles } from './styles';
import { Action, AllRowsAction, SingleRowAction, RowRecord, SortAction, TableProps, TableState } from './types';
import useColumns from '../hooks/useColumns';

function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
const {
Expand Down Expand Up @@ -113,34 +105,20 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
theme = defaultProps.theme,
customStyles = defaultProps.customStyles,
direction = defaultProps.direction,
onColumnOrderChange = defaultProps.onColumnOrderChange,
} = props;

// decorate columns with additional metadata required by RDT
const columnsMemo = React.useMemo(() => decorateColumns<T>(columns), [columns]);
const defaultSortDirection = getSortDirection(defaultSortAsc);
const defaultSortColumn = React.useMemo(
() => getColumnById<T>(defaultSortFieldId, columnsMemo) || {},
[columnsMemo, defaultSortFieldId],
);

// Run once
const initialState: TableState<T> = React.useMemo(
() => ({
allSelected: false,
rows: setRowData(data, defaultSortColumn?.selector, defaultSortDirection, sortServer, sortFunction),
selectedCount: 0,
selectedRows: [],
selectedColumn: defaultSortColumn,
toggleOnSelectedRowsChange: false,
sortDirection: defaultSortDirection,
currentPage: paginationDefaultPage,
rowsPerPage: paginationPerPage,
selectedRowsFlag: false,
contextMessage: defaultProps.contextMessage,
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);
const {
tableColumns,
draggingColumnId,
handleDragStart,
handleDragEnter,
handleDragOver,
handleDragLeave,
handleDragEnd,
defaultSortDirection,
defaultSortColumn,
} = useColumns(columns, onColumnOrderChange, defaultSortFieldId, defaultSortAsc);

const [
{
Expand All @@ -155,7 +133,19 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
toggleOnSelectedRowsChange,
},
dispatch,
] = React.useReducer<React.Reducer<TableState<T>, Action<T>>>(tableReducer, initialState);
] = React.useReducer<React.Reducer<TableState<T>, Action<T>>>(tableReducer, {
rows: setRowData(data, defaultSortColumn?.selector, defaultSortDirection, sortServer, sortFunction),
allSelected: false,
selectedCount: 0,
selectedRows: [],
selectedColumn: defaultSortColumn,
toggleOnSelectedRowsChange: false,
sortDirection: defaultSortDirection,
currentPage: paginationDefaultPage,
rowsPerPage: paginationPerPage,
selectedRowsFlag: false,
contextMessage: defaultProps.contextMessage,
});

const { persistSelectedOnSort = false, persistSelectedOnPageChange = false } = paginationServerOptions;
const mergeSelections = !!(paginationServer && (persistSelectedOnPageChange || persistSelectedOnSort));
Expand All @@ -165,7 +155,7 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
const currentTheme = React.useMemo(() => createStyles(customStyles, theme), [customStyles, theme]);
const wrapperProps = React.useMemo(() => ({ ...(direction !== 'auto' && { dir: direction }) }), [direction]);

const calculatedRows = React.useMemo(() => {
const tableRows = React.useMemo(() => {
if (pagination && !paginationServer) {
// when using client-side pagination we can just slice the rows set
const lastIndex = currentPage * rowsPerPage;
Expand Down Expand Up @@ -203,7 +193,7 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
});

const handleChangeRowsPerPage = (newRowsPerPage: number) => {
const rowCount = paginationTotalRows || calculatedRows.length;
const rowCount = paginationTotalRows || tableRows.length;
const updatedPage = getNumberOfPages(rowCount, newRowsPerPage);
const recalculatedPage = recalculatePage(currentPage, updatedPage);

Expand Down Expand Up @@ -245,7 +235,7 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
};

// recalculate the pagination and currentPage if the rows length changes
if (pagination && !paginationServer && rows.length > 0 && calculatedRows.length === 0) {
if (pagination && !paginationServer && rows.length > 0 && tableRows.length === 0) {
const updatedPage = getNumberOfPages(rows.length, rowsPerPage);
const recalculatedPage = recalculatePage(currentPage, updatedPage);

Expand Down Expand Up @@ -305,7 +295,7 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [rows]);

const rowData = selectableRowsVisibleOnly ? calculatedRows : rows;
const rowData = selectableRowsVisibleOnly ? tableRows : rows;
const showSelectAll = persistSelectedOnPageChange || selectableRowsSingle || selectableRowsNoSelectAll;

return (
Expand Down Expand Up @@ -359,22 +349,28 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
/>
))}
{expandableRows && !expandableRowsHideExpander && <TableColExpander />}
{columnsMemo.map(column => (
{tableColumns.map(column => (
<TableCol
key={column.id}
column={column}
selectedColumn={selectedColumn}
disabled={progressPending || rows.length === 0}
rows={rows}
pagination={pagination}
paginationServer={paginationServer}
persistSelectedOnSort={persistSelectedOnSort}
selectableRowsVisibleOnly={selectableRowsVisibleOnly}
selectedColumn={selectedColumn}
sortFunction={sortFunction}
sortDirection={sortDirection}
sortIcon={sortIcon}
sortServer={sortServer}
onSort={handleSort}
onDragStart={handleDragStart}
onDragOver={handleDragOver}
onDragEnd={handleDragEnd}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
draggingColumnId={draggingColumnId}
/>
))}
</TableHeadRow>
Expand All @@ -394,7 +390,7 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
className="rdt_TableBody"
role="rowgroup"
>
{calculatedRows.map((row, i) => {
{tableRows.map((row, i) => {
const id = isEmpty(row[keyField]) ? i : row[keyField];
const selected = isRowSelected(row, selectedRows, keyField);
const expanderExpander = !!(expandableRows && expandableRowExpanded && expandableRowExpanded(row));
Expand All @@ -406,7 +402,8 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
key={id}
keyField={keyField}
row={row}
columns={columnsMemo}
data-row-id={row[keyField]}
columns={tableColumns}
selectableRows={selectableRows}
expandableRows={expandableRows}
expandableIcon={expandableIcon}
Expand Down Expand Up @@ -435,6 +432,12 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
onRowClicked={handleRowClicked}
onRowDoubleClicked={handleRowDoubleClicked}
onSelectedRow={handleSelectedRow}
draggingColumnId={draggingColumnId}
onDragStart={handleDragStart}
onDragOver={handleDragOver}
onDragEnd={handleDragEnd}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
/>
);
})}
Expand Down
32 changes: 30 additions & 2 deletions src/DataTable/TableCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ interface TableCellStyleProps {
wrapCell: boolean | undefined;
allowOverflow: boolean | undefined;
cellStyle: CSSObject | undefined;
isDragging: boolean;
}

const overflowCSS = css<TableCellStyleProps>`
Expand All @@ -24,22 +25,43 @@ const TableCellStyle = styled(Cell).attrs(props => ({
font-size: ${({ theme }) => theme.rows.fontSize};
font-weight: 400;
${({ renderAsCell }) => !renderAsCell && overflowCSS};
${({ theme, isDragging }) => isDragging && theme.cells.draggingStyle};
${({ cellStyle }) => cellStyle};
`;

interface TableCellProps extends TableColumnBase {
id: string;
dataTag: string | null;
extendedCellStyle: CSSObject;
id: string;
column: TableColumnBase;
renderAsCell: boolean;
isDragging: boolean;
onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
onDragEnd: (e: React.DragEvent<HTMLDivElement>) => void;
onDragEnter: (e: React.DragEvent<HTMLDivElement>) => void;
onDragLeave: (e: React.DragEvent<HTMLDivElement>) => void;
children?: React.ReactNode;
}

function TableCell({ column, dataTag, extendedCellStyle, id, renderAsCell, children }: TableCellProps): JSX.Element {
function TableCell({
id,
column,
dataTag,
extendedCellStyle,
renderAsCell,
isDragging,
onDragStart,
onDragOver,
onDragEnd,
onDragEnter,
onDragLeave,
children,
}: TableCellProps): JSX.Element {
return (
<TableCellStyle
id={id}
data-column-id={column.id}
role="gridcell"
className="rdt_TableCell"
data-tag={dataTag}
Expand All @@ -57,6 +79,12 @@ function TableCell({ column, dataTag, extendedCellStyle, id, renderAsCell, child
width={column.width}
wrapCell={column.wrap}
style={extendedCellStyle}
isDragging={isDragging}
onDragStart={onDragStart}
onDragOver={onDragOver}
onDragEnd={onDragEnd}
onDragEnter={onDragEnter}
onDragLeave={onDragLeave}
>
{children}
</TableCellStyle>
Expand Down
Loading

0 comments on commit 08b60c4

Please sign in to comment.