Merge pull request #920 from jbetancur/feature/7-3-0

add tooltips | fix data render
jbetancur · Sep 23, 2021 · 6060386 · 6060386
2 parents e0ee263 + fc11d6d
commit 6060386
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 156 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-data-table-component",
- "version": "7.2.1",
+ "version": "7.3.0",
  "description": "A simple to use declarative react based data table",
  "main": "dist/index.cjs.js",
  "module": "dist/index.es.js",
@@ -50,14 +50,14 @@
  "@storybook/theming": "^6.3.8",
  "@testing-library/react": "^12.1.0",
  "@types/faker": "^5.5.8",
- "@types/jest": "^27.0.1",
+ "@types/jest": "^27.0.2",
  "@types/lodash-es": "^4.17.5",
  "@types/lodash.orderby": "^4.6.6",
- "@types/node": "^16.9.1",
- "@types/react": "^17.0.20",
+ "@types/node": "^16.9.6",
+ "@types/react": "^17.0.24",
  "@types/react-dom": "^17.0.9",
  "@types/styled-components": "^5.1.14",
- "@typescript-eslint/eslint-plugin": "^4.31.1",
+ "@typescript-eslint/eslint-plugin": "^4.31.2",
  "@typescript-eslint/parser": "^4.31.2",
  "axios": "^0.21.4",
  "babel-eslint": "^10.1.0",

diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx
@@ -278,10 +278,11 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
  }
  }, [paginationTotalRows]);
 
+ // handle updating data and persisting sort state when data changes after initial re-render
  useDidUpdateEffect(() => {
  dispatch({
  type: 'UPDATE_ROWS',
- rows: setRowData(data, defaultSortColumn?.selector, defaultSortDirection, sortServer, sortFunction),
+ rows: setRowData(data, selectedColumn?.selector, sortDirection, sortServer, sortFunction),
  });
  }, [data]);
 

diff --git a/src/DataTable/TableCol.tsx b/src/DataTable/TableCol.tsx
@@ -59,7 +59,6 @@ const sortableCSS = css<ColumnSortableProps>`
 const ColumnSortable = styled.div<ColumnSortableProps>`
  align-items: center;
  height: 100%;
- line-height: 1.5;
  outline: none;
  user-select: none;
  display: inline-flex;
@@ -125,6 +124,15 @@ function TableCol<T>({
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
+ const [showTooltip, setShowTooltip] = React.useState(false);
+ const columnRef = React.useRef<HTMLDivElement | null>(null);
+
+ React.useEffect(() => {
+ if (columnRef.current) {
+ setShowTooltip(columnRef.current.scrollWidth > columnRef.current.clientWidth);
+ }
+ }, [showTooltip]);
+
  if (column.omit) {
  return null;
  }
@@ -223,7 +231,9 @@ function TableCol<T>({
  {!disabled && nativeSortIconRight && renderNativeSortIcon(sortActive)}
 
  {typeof column.name === 'string' ? (
- <ColumnText data-column-id={column.id}>{column.name}</ColumnText>
+ <ColumnText title={showTooltip ? column.name : undefined} ref={columnRef} data-column-id={column.id}>
+ {column.name}
+ </ColumnText>
  ) : (
  column.name
  )}