Giter VIP home page Giter VIP logo

Comments (4)

dl-eric avatar dl-eric commented on September 28, 2024 2

Ty jq!

from bridge.

dl-eric avatar dl-eric commented on September 28, 2024

Taking this!

What should the width of the table be? The mocks kind of imply that it just wraps its children, but I wanted to be sure because it might make sense for it to fill the width of its parent (i.e width: 100%)

Current storyboard screenshot:
image

playground.js:

<Table type="primary">
  <TableHead>
    <TableRow>
      <TableCell>First Name</TableCell>
      <TableCell>Last Name</TableCell>
      <TableCell>Favorite Color</TableCell>
      <TableCell>Favorite Number</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Chloe</TableCell>
      <TableCell>Chan</TableCell>
      <TableCell>Pink</TableCell>
      <TableCell>3</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Ashley</TableCell>
      <TableCell>Chan</TableCell>
      <TableCell>Blue</TableCell>
      <TableCell>7</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Nicole</TableCell>
      <TableCell>Nguyen</TableCell>
      <TableCell>Red</TableCell>
      <TableCell>10</TableCell>
    </TableRow>
  </TableBody>
</Table>

 <Table type="borderless">
  <TableHead>
    <TableRow>
      <TableCell>First Name</TableCell>
      <TableCell>Last Name</TableCell>
      <TableCell>Favorite Color</TableCell>
      <TableCell>Favorite Number</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Chloe</TableCell>
      <TableCell>Chan</TableCell>
      <TableCell>Pink</TableCell>
      <TableCell>3</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Ashley</TableCell>
      <TableCell>Chan</TableCell>
      <TableCell>Blue</TableCell>
      <TableCell>7</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Nicole</TableCell>
      <TableCell>Nguyen</TableCell>
      <TableCell>Red</TableCell>
      <TableCell>10</TableCell>
    </TableRow>
  </TableBody>
</Table>

<Table type="zebra">
  <TableHead>
    <TableRow>
      <TableCell>First Name</TableCell>
      <TableCell>Last Name</TableCell>
      <TableCell>Favorite Color</TableCell>
      <TableCell>Favorite Number</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Chloe</TableCell>
      <TableCell>Chan</TableCell>
      <TableCell>Pink</TableCell>
      <TableCell>3</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Ashley</TableCell>
      <TableCell>Chan</TableCell>
      <TableCell>Blue</TableCell>
      <TableCell>7</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Nicole</TableCell>
      <TableCell>Nguyen</TableCell>
      <TableCell>Red</TableCell>
      <TableCell>10</TableCell>
    </TableRow>
  </TableBody>
</Table>

from bridge.

tko22 avatar tko22 commented on September 28, 2024

dope! could you assign yourself to the issue?

  • yep, I would make the table expand to the width of its parent.
  • For Table specific components, could you do <Table.Row/ >, <Table.Cell/> etc I would follow https://github.com/hack4impact-uiuc/bridge/blob/master/src/components/Card/Card.js
  • for , I would also set the default typography styles (typography.tables) and then table specific components will inherit the font.. but say for TableHead, font-weight will be bold

from bridge.

dl-eric avatar dl-eric commented on September 28, 2024

I can't assign myself :(

from bridge.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.