more style changes

Author: mckervinc

example/src/examples/07-controlled.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   randCatchPhrase,
   randCity,
@@ -104,7 +105,7 @@ const Controlled = ({ data, height, columns: variableColumns }: ControlledProps)
     <StyledTable
       borders
       data={rows}
-      columns={variableColumns}
+      columns={variableColumns as unknown as any[]}
       tableHeight={height}
       rowHeight={35}
       onSort={onSort}

example/src/examples/08-header.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import _ from "lodash";
 import React, { useState } from "react";
 import { ColumnProps, HeaderProps, SortDirection, Table } from "react-fluid-table";
@@ -19,7 +20,7 @@ const HeaderCell = ({ name, sortDirection, style, onClick }: HeaderCellProps) =>
     <Arrow size="small" name={`chevron ${sortDirection === "ASC" ? "up" : "down"}`} />
   );
 
-  const cellStyle = {
+  const cellStyle: any = {
     background: sortDirection ? "rgb(39, 40, 34)" : undefined,
     ...style
   };

example/src/examples/10-footer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef, useState } from "react";
 import { ColumnProps, FooterProps, Table } from "react-fluid-table";
 import { Checkbox, Form, Grid, Icon, Input, Radio } from "semantic-ui-react";
@@ -192,11 +193,11 @@ const Example10 = () => {
       <StyledTable
         borders
         data={testData.slice(0, 30)}
-        columns={columns}
+        columns={columns as unknown as any[]}
         stickyFooter={sticky}
         tableHeight={400}
         footerStyle={{ backgroundColor: "white" }}
-        footerComponent={InnerFooter}
+        footerComponent={InnerFooter as unknown as any}
       />
     </>
   );

index.d.ts

@@ -172,7 +172,7 @@ export type ColumnProps<T> = {
   /**
    * specifies whether or not to display a footer cell
    */
-  footer?: (props: FooterCellProps<T>) => ReactNode;
+  footer?: (props: FooterCellProps<T>) => ReactNode | JSX.Element;
 };
 
 export type TableRef = {
@@ -310,7 +310,7 @@ export type TableProps<T> = {
   /**
    * When a column has `expander`, this component will be rendered under the row.
    */
-  subComponent?: (props: SubComponentProps<T>) => ReactNode;
+  subComponent?: (props: SubComponentProps<T>) => ReactNode | JSX.Element;
   /**
    * The callback that gets called every time a row is clicked.
    */