How to Change CSS of Columns - Reacttable

How do I change the style of the header using ReactTable

Try adding the following css. You have to position the arrows properly.

rt-resizable-header -sort-desc:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content : ' ';
  border-top: 20px solid #000;
}

rt-resizable-header -sort-asc:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content : ' ';
  border-bottom: 20px solid #000;
}
.ReactTable .rt-thead .rt-th.-sort-desc, .ReactTable .rt-thead .rt-td.-sort-desc {
    box-shadow: none;
}

React table changing style of cell onClick

you want is:when you click a particular cell,that particular cell change color?
if so, you just need remember the selected row.like is demo, is this you want ?

How to customize a column in react table 7

You can modify column like:

{
        accessor: 'accessor',
        Header: 'Header',
        Cell: ({ row: { original } }) => (
            <button
                onClick=(() => console.log(original))
            >
                Button text
            </button>
        ),
},

Or you can modify default table cell DefaultCell.js:

const DefaultCell = ({ cell: { value, column }, row: { original } }) => (
 <span
    style={{
     whiteSpace: 'pre-wrap',
    }}
 >
  {column.id === 'button' ?
   (
    <button
        onClick=(() => console.log(original))
    >
        Button text
    </button>
   ) : value}
 </span>
)

And react-table usage:

const defaultColumn = React.useMemo(
 () => ({
  minWidth: 5,
  width: 150,
  maxWidth: 400,
  Cell: DefaultCell,
 }),
 []
);

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    canPreviousPage,
    canNextPage,
    nextPage,
    previousPage,
    setPageSize,
    pageSize,
} = useTable({
  {
   columns,
   data,
   defaultColumn
  },
  initialState: { pageIndex: 0, pageSize: 7 } },
  useExpanded,
  usePagination
);

Change React-Table default styling

It's possible by using a Custom Expander. You can just define your column like this:

columns: [
  // other columns...,
  {
    expander: true,
    Header: () => <strong>More</strong>,
    width: 65,
    Expander: ({ isExpanded, ...rest }) =>
      <div>
        {isExpanded
          ? <span>⊙</span>
          : <span>⊕</span>}
      </div>,
    style: {
      cursor: "pointer",
      fontSize: 25,
      padding: "0",
      textAlign: "center",
      userSelect: "none",
      color: "green"
    },
    Footer: () => <span>♥</span>
  }
]

React-table Individual Cell Style

getTdProps is for the entire row. Use getProps in the column definition instead. For example:

<ReactTable
    data={[
        { age: 8 },
        { age: 11 },
        { age: 9 },
        { age: 6 },
        { age: 12 },
    ]}
    columns={[
        {
            Header: 'Age',
            accessor: 'age',
            getProps: (state, rowInfo, column) => {
                return {
                    style: {
                        background: rowInfo && rowInfo.row.age > 10 ? 'red' : null,
                    },
                };
            },
        }
    ]}
/>

Styling for React-Table component

The string present in your question is not a component, but it easily could be. Those elements don't necessarily need to be strings; react-table is a headless library, so you're free to change the visuals the way you want. There are a variety of possible solutions here. One solution would be to replace the entire ternary by defining a custom functional component for that sort icon:

const sortIcon = (sorted, sortedDesc) => {
  if (sortedDesc) {
    return (<h1> this is arbitrary </h1>);
  } else if (sorted) {
    return (<h2> more arbitrary </h2>);
  } else {
    return null;
  }
}

and then replacing the ternary:

<span {...column.getSortByToggleProps()}>
                        {column.render('Header')}
                        {/* Add a sort direction indicator */}
                        {sortIcon(column.isSorted, column.isSortedDesc)}
                      </span>

This is a bad way to do it, probably, and untested beside that, but the point is that the HTML/JSX stuff is arbitrary. Those emoji strings can be replaced with valid JSX in any form. You could do a similar thing with the column.isGrouped ternary, as well! It may be worth looking at some JSX tutorials if you're not already familiar, or re-familiarizing yourself with exactly what a column Object contains if you want to continue to add functionality.

(link caveat: each of the different useX hooks adds more stuff to the column/row/etc Objects, so I just linked the core useTable one)

---

Related Topics